搜尋

首頁 >web前端 >H5教程 >html5實作完美相容各大瀏覽器的播放器_html5教學技巧

html5實作完美相容各大瀏覽器的播放器_html5教學技巧

WBOY
WBOY原創
2016-05-16 15:46:551768瀏覽

歌曲播放我們會發現他的相容性不是很好，譬如IE上能播放的flash播放器，再firfox或者chrome上就不是很好的應用了，因為有插件的阻礙!HTML5的出現讓這一切都成為了可能，但播放器雖然播放了，我們還要關註一下使用者的體驗度，所以，我們就寫了一個HTML相容的播放器！向下相容IE6-9、chrome、firfox、opera等主流播放器，應該是全相容！實現原理代碼給大家奉上！


複製程式碼
程式碼如下:





歌词同步播放器-powered by widuu xiaowei








<script><br>//<![CDATA[<br />$(document).ready(function(){<br /> $("#jquery_jplayer_1").jPlayer({<br /> ready: function (event) {<br /> $(this).jPlayer("setMedia", {<br /> mp3:"yangcong.mp3" //mp3的播放地址<br /> }).jPlayer("play");<br /> },<br /> timeupdate: function(event) {<br /> if(event.jPlayer.status.currentTime==0){<br /> time = "";<br /> }else {<br /> time = event.jPlayer.status.currentTime;<br /> }<br /> <br /> },<br /> play: function(event) {<br /> //点击开始方法调用lrc。start歌词方法 返回时间time<br /> <br /> if(event.jPlayer.status.currentTime==0){<br /> $("#jquery_jplayer_1").jPlayer("pause",1);<br /> }<br /> <br /> if($('#lrc_content').val()!==""){<br /> $.lrc.start($('#lrc_content').val(), function() {<br /> return time;<br /> });<br /> }else{<br /> $(".content").html("没有字幕");<br /> }<br /> },<br /> repeat: function(event) {<br /> if(event.jPlayer.options.loop) {<br /> $(this).unbind(".jPlayerRepeat").bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() {<br /> $(this).jPlayer("play");<br /> });<br /> } else {<br /> $(this).unbind(".jPlayerRepeat");<br /> }<br /> },<br /> swfPath: "/js", //存放jplayer.swf的决定路径<br /> solution:"html, flash", //支持的页面<br /> supplied: "mp3", //支持的音频的格式<br /> wmode: "window" <br /> <br /> });<br /> $("#lrc_content").hide();<br />});<br />//]]><br></script>




陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：HTML5 audio標籤使用js進行播放控制實例_html5教學技巧下一篇：HTML5 audio標籤使用js進行播放控制實例_html5教學技巧

相關文章

看更多