简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  HTML5 implementiert Player, die perfekt mit den wichtigsten Browsern kompatibel sind. HTML5-Tutorial-Fähigkeiten

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

WBOY
WBOYOriginal
2016-05-16 15:46:551743Durchsuche

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




Stellungnahme：
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
Vorheriger Artikel：HTML5-Audio-Tag verwendet js zur Wiedergabesteuerung. example_html5-Tutorial-FähigkeitenNächster Artikel：HTML5-Audio-Tag verwendet js zur Wiedergabesteuerung. example_html5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen