Heim Web-Frontend js-Tutorial Grundlegendes Tutorial zur Verwendung von jPlayer, einem Web-Audio- und Videoplayer, der auf jQuery_jquery basiert

Grundlegendes Tutorial zur Verwendung von jPlayer, einem Web-Audio- und Videoplayer, der auf jQuery_jquery basiert

May 16, 2016 pm 03:11 PM
javascript jquery 播放器 视频 音频

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("*");
Nach dem Login kopieren

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");
});
Nach dem Login kopieren

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);
});
Nach dem Login kopieren

Erklärung dieser Website
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

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Ist es ein Verstoß, die Videos anderer Leute auf Douyin zu posten? Wie werden Videos ohne Rechtsverletzung bearbeitet? Ist es ein Verstoß, die Videos anderer Leute auf Douyin zu posten? Wie werden Videos ohne Rechtsverletzung bearbeitet? Mar 21, 2024 pm 05:57 PM

Ist es ein Verstoß, die Videos anderer Leute auf Douyin zu posten? Wie werden Videos ohne Rechtsverletzung bearbeitet?

Wie kann man mit dem Posten von Videos auf Douyin Geld verdienen? Wie kann ein Neuling mit Douyin Geld verdienen? Wie kann man mit dem Posten von Videos auf Douyin Geld verdienen? Wie kann ein Neuling mit Douyin Geld verdienen? Mar 21, 2024 pm 08:17 PM

Wie kann man mit dem Posten von Videos auf Douyin Geld verdienen? Wie kann ein Neuling mit Douyin Geld verdienen?

VLC Chromecast funktioniert nicht auf einem Windows-PC VLC Chromecast funktioniert nicht auf einem Windows-PC Mar 26, 2024 am 10:41 AM

VLC Chromecast funktioniert nicht auf einem Windows-PC

So posten Sie Videos auf Weibo, ohne die Bildqualität zu komprimieren_So posten Sie Videos auf Weibo, ohne die Bildqualität zu komprimieren So posten Sie Videos auf Weibo, ohne die Bildqualität zu komprimieren_So posten Sie Videos auf Weibo, ohne die Bildqualität zu komprimieren Mar 30, 2024 pm 12:26 PM

So posten Sie Videos auf Weibo, ohne die Bildqualität zu komprimieren_So posten Sie Videos auf Weibo, ohne die Bildqualität zu komprimieren

Wie veröffentliche ich Xiaohongshu-Videowerke? Worauf sollte ich beim Posten von Videos achten? Wie veröffentliche ich Xiaohongshu-Videowerke? Worauf sollte ich beim Posten von Videos achten? Mar 23, 2024 pm 08:50 PM

Wie veröffentliche ich Xiaohongshu-Videowerke? Worauf sollte ich beim Posten von Videos achten?

2 Möglichkeiten, Zeitlupe aus Videos auf dem iPhone zu entfernen 2 Möglichkeiten, Zeitlupe aus Videos auf dem iPhone zu entfernen Mar 04, 2024 am 10:46 AM

2 Möglichkeiten, Zeitlupe aus Videos auf dem iPhone zu entfernen

So betten Sie ein PPT-Video in ein Foliendokument ein und fügen es zu einer Datei zusammen So betten Sie ein PPT-Video in ein Foliendokument ein und fügen es zu einer Datei zusammen Mar 20, 2024 am 11:30 AM

So betten Sie ein PPT-Video in ein Foliendokument ein und fügen es zu einer Datei zusammen

So laden Sie Videos von Baidu Netdisk in Fotoalben für Mobiltelefone herunter. So speichern Sie Videos in Fotoalben für Mobiltelefone So laden Sie Videos von Baidu Netdisk in Fotoalben für Mobiltelefone herunter. So speichern Sie Videos in Fotoalben für Mobiltelefone Mar 13, 2024 am 09:34 AM

So laden Sie Videos von Baidu Netdisk in Fotoalben für Mobiltelefone herunter. So speichern Sie Videos in Fotoalben für Mobiltelefone

See all articles