html5는 주요 브라우저와 완벽하게 호환되는 플레이어를 구현합니다. html5 튜토리얼 기술
- WBOY원래의
- 2016-05-16 15:46:551790검색
노래 재생의 호환성이 그다지 좋지 않다는 것을 알 수 있습니다. 예를 들어 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>
- mp3player powered by xiaowei
업데이트 필요
필요한 미디어를 재생하려면 브라우저를 최신 버전으로 업데이트하거나 http://get.adobe.com/flashplayer를 업데이트하세요. //" target="_blank">플래시 플러그인.
点击开始播放… >
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.