HTML5 implementiert Player, die perfekt mit den wichtigsten Browsern kompatibel sind. HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Wir werden feststellen, dass die Kompatibilität der Songwiedergabe nicht sehr gut ist. Der Flash-Player, der im IE abgespielt werden kann, ist aufgrund des Aufkommens von Plug-Ins keine gute Anwendung HTML5 hat dies ermöglicht Alles ist möglich, aber obwohl der Player spielt, müssen wir immer noch auf die Benutzererfahrung achten, also haben wir einen HTML-kompatiblen Player geschrieben! Es ist abwärtskompatibel mit IE6-9, Chrome, Firfox, Opera und anderen Mainstream-Playern. Es sollte vollständig kompatibel sein! Der Implementierungsprinzipcode wird allen präsentiert!

Code kopieren

Der Code lautet wie folgt:

歌词同步播放器-powered by widuu xiaowei

<script> //<![CDATA[ $(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function (event) { $(this).jPlayer("setMedia", { mp3:"yangcong.mp3" //mp3的播放地址 }).jPlayer("play"); }, timeupdate: function(event) { if(event.jPlayer.status.currentTime==0){ time = ""; }else { time = event.jPlayer.status.currentTime; } }, play: function(event) { //点击开始方法调用lrc。start歌词方法返回时间time if(event.jPlayer.status.currentTime==0){ $("#jquery_jplayer_1").jPlayer("pause",1); } if($('#lrc_content').val()!==""){ $.lrc.start($('#lrc_content').val(), function() { return time; }); }else{ $(".content").html("没有字幕"); } }, repeat: function(event) { if(event.jPlayer.options.loop) { $(this).unbind(".jPlayerRepeat").bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function() { $(this).jPlayer("play"); }); } else { $(this).unbind(".jPlayerRepeat"); } }, swfPath: "/js", //存放jplayer.swf的决定路径 solution:"html, flash", //支持的页面 supplied: "mp3", //支持的音频的格式 wmode: "window" }); $("#lrc_content").hide(); }); //]]> </script>

play

pause

stop

mute

unmute

maximale Lautstärke

< /div>

repeat

repeat off

mp3player powered by xiaowei

Update erforderlich
Zum Abspielen der Medien benötigen Sie um entweder Ihren Browser auf eine aktuelle Version oder Ihren http://get.adobe.com/flashplayer zu aktualisieren /" target="_blank">Flash-Plugin.

点击开始播放……

Verwandte Etiketten：

html5 完美兼容播放器

Quelle：php.cn

Vorheriger Artikel：HTML5-Audio-Tag verwendet js zur Wiedergabesteuerung. example_html5-Tutorial-Fähigkeiten Nächster Artikel：Zusammenfassung aller HTML5-Tags und Erläuterung der Tag-Bedeutung_html5-Tutorial-Fähigkeiten

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors