html5는 주요 브라우저와 완벽하게 호환되는 플레이어를 구현합니다. html5 튜토리얼 기술

노래 재생의 호환성이 그다지 좋지 않다는 것을 알 수 있습니다. 예를 들어 IE에서 재생할 수 있는 플래시 플레이어는 플러그인의 방해로 인해 Firefox나 Chrome에서 좋은 응용 프로그램이 아닙니다. HTML5로 인해 모든 것이 가능해졌지만 플레이어가 플레이하더라도 여전히 사용자 경험에 주의를 기울여야 하므로 HTML 호환 플레이어를 작성했습니다! IE6-9, chrome, fifox, 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>

• play


• pause


• stop


• 음소거


• unmute


• 최대 볼륨

div>

• 반복


• 반복 끄기

• mp3player powered by xiaowei

ul>

업데이트 필요
필요한 미디어를 재생하려면 브라우저를 최신 버전으로 업데이트하거나 http://get.adobe.com/flashplayer를 업데이트하세요. //" target="_blank">플래시 플러그인.

点击开始播放… >