Home  >  Article  >  Web Front-end  >  html5 implements players that are perfectly compatible with major browsers_html5 tutorial skills

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

WBOY
WBOYOriginal
2016-05-16 15:46:551745browse

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:





歌词同步播放器-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>






    点击开始播放……



Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn