html5 implements players that are perfectly compatible with major browsers_html5 tutorial skills

We will find that the compatibility of song playback is not very good. For example, the flash player that can be played on IE is not a good application on Firefox or Chrome because of the obstruction of plug-ins! The emergence of HTML5 has made this Everything has become possible, but although the player plays, we still need to pay attention to the user experience, so we wrote an HTML-compatible player! It is backward compatible with IE6-9, chrome, firfox, opera and other mainstream players. It should be fully compatible! The implementation principle code is presented to everyone!

Copy code

The code is as follows:

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

• play


• pause


• stop


• mute


• unmute


• max volume

• repeat


• repeat off

• mp3player powered by xiaowei

Update Required
To play the media you will need to either update your browser to a recent version or update your http://get.adobe.com/flashplayer/" target="_blank">Flash plugin.

点击开始播放……