recherche

Maison >interface Web >Tutoriel H5 >html5 implémente des lecteurs parfaitement compatibles avec les principaux navigateurs_html5 compétences du didacticiel

html5 implémente des lecteurs parfaitement compatibles avec les principaux navigateurs_html5 compétences du didacticiel

WBOY
WBOYoriginal
2016-05-16 15:46:551765parcourir

Nous constaterons que la compatibilité de lecture des chansons n'est pas très bonne. Par exemple, le lecteur Flash qui peut être joué sur IE n'est pas une bonne application sur Firefox ou Chrome à cause de l'obstruction des plug-ins ! HTML5 a rendu cela possible. Tout est devenu possible, mais même si le lecteur joue, nous devons toujours prêter attention à l'expérience utilisateur, c'est pourquoi nous avons écrit un lecteur compatible HTML ! Il est rétrocompatible avec IE6-9, Chrome, Firefox, Opera et d'autres lecteurs grand public. Il devrait être entièrement compatible ! Le code du principe de mise en œuvre est présenté à tous !


Copier le code
Le code est le suivant :





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




Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：La balise audio HTML5 utilise js pour le contrôle de la lecture example_html5 compétences du didacticielArticle suivant：La balise audio HTML5 utilise js pour le contrôle de la lecture example_html5 compétences du didacticiel

Articles Liés

Voir plus