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

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

複製程式碼

程式碼如下:

<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>


<br>[ar:测试用 ] <br>[00:03.00]洋葱<br>[00:06.00]演唱：平安<br>[00:09.00]<br>[00:11.38]如果你眼神能够为我片刻的降临<br>[00:21.23]如果你能听到心碎的声音<br>[00:28.88]盘底的洋葱像我永远是配角戏<br>[00:35.74]偷偷的看着你偷偷的隐藏着自己<br>[00:43.48]<br>[00:44.90]如果你愿意一层一层<br>[00:48.46]一层的剥开我的心<br>[00:52.66]你会发现你会讶异<br>[00:56.40]你是我最压抑最深处的秘密<br>[01:00.26]如果你愿意一层一层<br>[01:03.69]一层的剥开我的心<br>[01:07.76]你会鼻酸你会流泪<br>[01:11.60]只要你能听到我看到我的全心全意<br>[01:18.30]<br>[01:19.11]如果你愿意一层一层<br>[01:22.57]一层的剥开我的心<br>[01:26.66]你会发现你会讶异<br>[01:30.41]你是我最压抑最深处的秘密<br>[01:34.48]如果你愿意一层一层<br>[01:37.58]一层的剥开我的心<br>[01:41.51]你会鼻酸你会流泪<br>[01:45.15]只要你能听到我看到我的全心全意<br>[01:53.55]<br>[01:55.65]你会鼻酸你会流泪<br>[01:59.84]只要你能听到我看到我的全心全意<br>[02:12.57]<br>

• 播放


• 暫停


• 停止


• 靜音


• 取消靜音


• 最大音量

div>

• 重複


• 重複關閉

• mp3playerpowered by xiaowei

ul>

需要更新
播放您需要的媒體，將您的瀏覽器更新到最新版本或更新您的http://get . adobe.com/flashplayer /” target="_blank">Flash 外掛。

點選開始播放…