Tutoriel d'utilisation de base de jPlayer, un lecteur web audio et vidéo basé sur jQuery_jquery

Présentation de jPlayer :

Je souhaite écouter de la musique de fond sur une page Web, mais je ne souhaite pas utiliser de balises HTML, car de cette façon, la musique ne peut être jouée qu'une fois toute la musique téléchargée, et elle est sujette à une compatibilité entre navigateurs. problèmes, j'ai donc choisi un lecteur basé sur jQuery, jPlayer le fait.

Définir la taille de jPlayer
Utilisez le constructeur pour configurer jPlayer({size:Object}) afin de définir la hauteur et la largeur de jPlayer.

Utilisez le constructeur pour configurer jPlayer({sizeFull:Object}) pour définir la taille plein écran.

Notez que la couleur d'arrière-plan de jPlayer peut être définie via la configuration du constructeur jPlayer({backgroundColor:"#RRGGBB"}).

Règles de sécurité Flash
Utilisez le code suivant pour assouplir les restrictions sur les fichiers SWF de jPlayer, et vous pouvez appeler des fichiers swf de n'importe quel nom de domaine.

flash.system.Security.allowDomain("*");
flash.system.Security.allowInsecureDomain("*");

Déploiement

Habituellement, vous devez télécharger les fichiers swf et js dans le répertoire js sous votre nom de domaine. Modifiez le chemin swf à l'aide de la configuration du constructeur jPlayer({"swfPath":path}).

À proprement parler, les fichiers du plug-in peuvent être liés à distance à jplayer.org, mais nous vous demandons de ne pas créer de lien vers jplayer.com car nous n'avons actuellement pas suffisamment de ressources pour construire un CDN. De plus, le logiciel de lecture Flash sur le serveur distant exige que toutes les URL de fichiers multimédia définies par jPlayer("setMedia", media) utilisent des chemins absolus.

Pour développer localement, vous devez installer un serveur sur votre ordinateur, tel qu'Apache, pour activer localhost.

Utilisez l'API Javascript pour contrôler les fichiers multimédias sur votre site Web Formats multimédia pris en charge par jPlayer : HTML5 : mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm* Flash : mp3, m4a (AAC), m4v (H.264)

jPlayer nécessite que deux fichiers soient téléchargés sur votre serveur :

(1)Jplayer.swf

(2)jquery.jplayer.min.js

jPlayer est construit sur le sélecteur jQuery. Utilisez le formulaire $(ID).jPlayer(Object: options) pour exécuter l'action. Dans certains cas, jPlayer peut également être construit sur le corps, c'est-à-dire lorsque vous n'avez pas besoin de lire des vidéos.

Remarque : swfPath, qui définit le chemin du fichier SWF jPlayer. N'oubliez pas de télécharger le fichier SWF sur votre serveur ! Vous pouvez également utiliser des instructions telles que jPlayer({solution:"flash, html") pour spécifier quelle méthode doit être utilisée en premier pour lire le média.

Modifier les paramètres après l'initialisation
Après l'initialisation, utilisez un formulaire similaire à jPlayer("option",{key:value}) pour modifier les paramètres.
Implémentez une page Web qui lit automatiquement de la musique

$(document).ready(function(){
 $("#jquery_jplayer_1").jPlayer({
 ready: function (event) {
  $(this).jPlayer("setMedia", {
  m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",
  oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
  });
 },
 swfPath: "js",
 supplied: "m4a, oga",
 }).jPlayer("play");
});

Expliquez le code ci-dessus :

La première ligne "$(document).ready(function(){" est très conviviale pour tout le monde, événement de chargement de document.

La deuxième ligne "$("#jquery_jplayer_1").jPlayer({" sélectionne un DIV, qui est utilisé pour transporter des éléments HTML5 ou Flash. Vous pouvez simplement écrire un DIV vide dans le document.

La troisième ligne "ready: function (event) {", ready est une clé, function est une valeur, quelque chose de très familier.

La quatrième ligne "$(this).jPlayer("setMedia", {"this fait référence à "$("#jquery_jplayer_1")", ce qui signifie : "$("#jquery_jplayer_1").jPlayer("setMedia " , {" est très familier. setMedia est une option, selon la deuxième étape.

La neuvième ligne "swfPath: "js", ceci définit le chemin relatif où se trouve le lecteur swf. Si vous ne prévoyez pas d'être compatible avec les pages Web qui ne supportent pas HTML5, vous n'avez pas besoin d'écrire. ça :)

Format supporté par la ligne 10" fournie : "m4a, oga",".

La onzième ligne "jPlayer("play");" signifie : $("#jquery_jplayer_1").jPlayer("play");, lit le média et réalise la lecture automatique.

Méthodes couramment utilisées dans jPlayer :

//播放
$("#jpId").jPlayer("play");
//暂停
$("#jpId").jPlayer("pause");
//停止
$("#jpId").jPlayer("stop");
//设置进度相关
//1.按歌曲时长百分比
$("#jpId").jPlayer("playHead", 0);// 从 0% 处开始播放
$("#jpId").jPlayer("playHead", 10);// 从 10% 处开始播放
$("#jpId").jPlayer("playHead", 100);// 从 100% 处开始播放
//2.按播放毫秒数
$("#jpId").jPlayer("playHeadTime", 0);// 从 0毫秒 处开始播放
$("#jpId").jPlayer("playHeadTime", 10000); // 从 10000毫秒(10秒) 处开始播放
//设定音量
$("#jpId").jPlayer("volume", 0.25); //设为最大音量的 25%
//绑定事件
//播放结束事件
$("#jpId").jPlayer("onSoundComplete", function() {
  //alert('播放结束了');
  this.element.jPlayer("play"); // 循环播放
});
//播放进行事件
$("#jpId").jPlayer("onProgressChange", function(lp,ppr,ppa,pt,tt) {
  var s = '缓冲百分比:'+lp +'% ,';
  s += '已播放占已缓冲的百分比:'+ppr +'% ,';
  s += '已播放占总时长的百分比:'+ppa +'%';
  s += '已播放时间:'+pt+ '毫秒 ,';
  s += '总时间:'+tt+ '毫秒';
  $("#play_info").text(s);
});