jPlayer-Einführung:
Ich möchte Hintergrundmusik auf einer Webseite abspielen, aber ich möchte keine HTML-Tags verwenden, da die Musik auf diese Weise erst abgespielt werden kann, nachdem die gesamte Musik heruntergeladen wurde, und es anfällig für browserübergreifende Kompatibilität ist Probleme, also habe ich einen Player ausgewählt, der auf jQuery basiert. jPlayer erledigt das.
Legen Sie die Größe von jPlayer fest
Verwenden Sie den Konstruktor, um jPlayer({size:Object}) zu konfigurieren, um die Höhe und Breite von jPlayer festzulegen.
Verwenden Sie den Konstruktor, um jPlayer({sizeFull:Object}) so zu konfigurieren, dass die Vollbildgröße festgelegt wird.
Beachten Sie, dass die Hintergrundfarbe von jPlayer über die Konstruktorkonfiguration jPlayer({backgroundColor:"#RRGGBB"}) festgelegt werden kann.
Flash-Sicherheitsregeln
Verwenden Sie den folgenden Code, um die Einschränkungen für jPlayer-SWF-Dateien zu lockern, und Sie können SWF-Dateien mit jedem beliebigen Domänennamen aufrufen.
flash.system.Security.allowDomain("*");
flash.system.Security.allowInsecureDomain("*");
Bereitstellung
Normalerweise müssen Sie SWF-Dateien und JS-Dateien in das JS-Verzeichnis unter Ihrem Domainnamen hochladen. Ändern Sie den SWF-Pfad mithilfe der Konstruktorkonfiguration jPlayer({"swfPath":path}).
Genau genommen sind die Plug-in-Dateien möglicherweise remote mit jplayer.org verknüpft. Wir bitten Sie jedoch, keine Verknüpfung mit jplayer.com herzustellen, da wir derzeit nicht über ausreichende Ressourcen verfügen, um ein CDN zu erstellen. Darüber hinaus erfordert die Flash-Wiedergabesoftware auf dem Remote-Server, dass alle von jPlayer("setMedia", media) festgelegten Multimediadatei-URLs absolute Pfade verwenden.
Um lokal zu entwickeln, müssen Sie einen Server auf Ihrem Computer installieren, z. B. Apache, um Localhost zu aktivieren.
Verwenden Sie die Javascript-API, um Mediendateien auf Ihrer Website zu steuern. Von JPlayer unterstützte Medienformate: HTML5: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm* Flash: mp3, m4a (AAC), m4v (H.264)
jPlayer erfordert das Hochladen von zwei Dateien auf Ihren Server:
(1)Jplayer.swf
(2)jquery.jplayer.min.js
jPlayer basiert auf dem jQuery-Selektor. Verwenden Sie die Form $(ID).jPlayer(Object: Optionen), um die Aktion auszuführen. In einigen Fällen kann der jPlayer auch auf dem Körper aufgebaut werden, was bedeutet, dass Sie keine Videos abspielen müssen.
Hinweis: swfPath, der den Pfad der jPlayer-SWF-Datei definiert. Denken Sie daran, die SWF-Datei auf Ihren Server hochzuladen! Sie können auch Anweisungen wie jPlayer({solution:"flash, html") verwenden, um anzugeben, welche Methode zuerst zum Abspielen von Medien verwendet werden soll.
Einstellungen nach der Initialisierung ändern
Verwenden Sie nach der Initialisierung ein Formular ähnlich wie jPlayer("option",{key:value}), um die Einstellungen zu ändern.
Implementieren Sie eine Webseite, die automatisch Musik abspielt
$(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");
});
Erklären Sie den obigen Code:
Die erste Zeile „$(document).ready(function(){“ ist für alle sehr benutzerfreundlich, Dokumentladeereignis.
Die zweite Zeile „$(“#jquery_jplayer_1“).jPlayer({“ wählt ein DIV aus, das zum Übertragen von HTML5-Elementen oder Flash verwendet wird. Sie können einfach ein leeres DIV in das Dokument schreiben.
Die dritte Zeile „ready: function (event) {“, ready ist ein Schlüssel, function ist ein Wert, etwas sehr Vertrautes.
Die vierte Zeile „$(this).jPlayer(“setMedia“, {“this verweist auf „$(“#jquery_jplayer_1“)“, was bedeutet: „$(“#jquery_jplayer_1“).jPlayer(“setMedia „ , {" ist sehr vertraut. setMedia ist gemäß dem zweiten Schritt eine Option.
Die neunte Zeile „swfPath: „js““ definiert den relativen Pfad, in dem sich der SWF-Player befindet. Wenn Sie nicht vorhaben, mit Webseiten kompatibel zu sein, die HTML5 nicht unterstützen, müssen Sie nichts schreiben es :)Von Zeile 10 unterstütztes Format „geliefert: „m4a, oga“,“.
Die elfte Zeile „jPlayer(“play“);“ bedeutet: $(“#jquery_jplayer_1“).jPlayer(“play“);, spielt das Medium ab und realisiert die automatische Wiedergabe.
Häufig verwendete Methoden in 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);
});
