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

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 :

<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


• mute


• unmute


• volume max

< /div>

• repeat


• répétition désactivée

• lecteur mp3 alimenté par xiaowei

Mise à jour requise
Pour lire le média dont vous aurez besoin pour mettre à jour votre navigateur vers une version récente ou mettre à jour votre http://get.adobe.com/flashplayer /" target="_blank">Plugin Flash.

点击开始播放……

Étiquettes associées：

html5 Parfaitement compatible 播放器

source：php.cn

Article précédent：La balise audio HTML5 utilise js pour le contrôle de la lecture example_html5 compétences du didacticiel Article suivant：Résumé de toutes les balises HTML5 et explication des compétences du didacticiel Signification des balises_html5

Déclaration de ce site Web

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

Derniers articles par auteur

• Qu'est-ce qu'une NullPointerException et comment y remédier ?
  2024-10-22 09:46:29
• De novice à codeur : votre voyage commence par les principes fondamentaux du C
  2024-10-13 13:53:41
• Débloquer le développement Web avec PHP : guide du débutant
  2024-10-12 12:15:51
• Démystifier C : un chemin clair et simple pour les nouveaux programmeurs
  2024-10-11 22:47:31
• Libérez votre potentiel de codage : programmation C pour les débutants absolus
  2024-10-11 19:36:51
• Libérez votre programmeur intérieur : C pour les débutants absolus
  2024-10-11 15:50:41
• Automatisez votre vie avec C : scripts et outils pour les débutants
  2024-10-11 15:07:41
• PHP Made Easy : vos premiers pas dans le développement Web
  2024-10-11 14:21:21
• Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité
  2024-10-11 12:59:11
• La clé du codage : libérer la puissance de Python pour les débutants
  2024-10-11 12:17:31

Derniers numéros

Comment faire apparaître mon image sur l'écran principal de la page ? Ce que je veux faire, c'est recevoir des photos en utilisant NASAAPI. Ces photos sont ensu...

Depuis 2024-04-06 15:33:12

0

1

433

Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...

Depuis 2024-04-05 12:57:00

0

1

456

Quelle est la différence entre enctype et formenctype en HTML5 ? Je me demande simplement quelle est la différence entre les attributs enctype et formencty...

Depuis 2024-04-02 11:47:56

0

1

275

Rendre la page adaptée aux mobiles ? J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...

Depuis 2024-04-01 20:42:38

0

1

259

Rubriques connexes

Plus>

• Quelles sont les méthodes de production de production d'animation html5 ?
• La différence entre HTML et HTML5
• Quelle plateforme est la meilleure pour le trading de devises virtuelles ?
• Comment installer le pilote
• Comment remplacer tous les arrière-plans ppt
• La différence entre python et pycharm
• Comment vérifier l'utilisation du processeur sous Linux
• Toutes les utilisations des serveurs cloud