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ße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

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

Mit dem Aufkommen von Kurzvideoplattformen ist Douyin zu einem unverzichtbaren Bestandteil des täglichen Lebens eines jeden geworden. Auf TikTok können wir interessante Videos aus aller Welt sehen. Manche Leute posten gerne die Videos anderer Leute, was die Frage aufwirft: Verstößt Douyin gegen das Posten der Videos anderer Leute? In diesem Artikel wird dieses Problem erörtert und Ihnen erklärt, wie Sie Videos ohne Rechtsverletzung bearbeiten und Probleme mit Rechtsverletzungen vermeiden können. 1. Verstößt es gegen Douyins Veröffentlichung von Videos anderer Personen? Gemäß den Bestimmungen des Urheberrechtsgesetzes meines Landes stellt die unbefugte Nutzung der Werke des Urheberrechtsinhabers ohne die Erlaubnis des Urheberrechtsinhabers einen Verstoß dar. Daher stellt das Posten von Videos anderer Personen auf Douyin ohne die Erlaubnis des ursprünglichen Autors oder Urheberrechtsinhabers einen Verstoß dar. 2. Wie bearbeite ich ein Video ohne Urheberrechtsverletzung? 1. Verwendung von gemeinfreien oder lizenzierten Inhalten: Öffentlich

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

Funktioniert die VLC Chromecast-Funktion auf Ihrem Windows-PC nicht? Dieses Problem kann durch Kompatibilitätsprobleme zwischen Ihrem Chromecast-Gerät und der Casting-Funktion von VLC verursacht werden. In diesem Artikel verraten wir Ihnen, was Sie in dieser Situation tun können und was zu tun ist, wenn der VLC-Renderer Ihren Chromecast nicht finden kann. Wie verwende ich ChromecastVLC unter Windows? Um mit VLC Videos von Windows auf Chromecast zu übertragen, gehen Sie folgendermaßen vor: Öffnen Sie die Media Player-App und gehen Sie zum Wiedergabemenü. Navigieren Sie zur Option „Renderer“ und Sie können das erkannte Chromecast-Gerät sehen

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

Douyin, die nationale Kurzvideoplattform, ermöglicht uns nicht nur, in unserer Freizeit eine Vielzahl interessanter und neuartiger Kurzvideos zu genießen, sondern gibt uns auch eine Bühne, um uns zu zeigen und unsere Werte zu verwirklichen. Wie kann man also Geld verdienen, indem man Videos auf Douyin veröffentlicht? Dieser Artikel wird diese Frage ausführlich beantworten und Ihnen dabei helfen, mit TikTok mehr Geld zu verdienen. 1. Wie kann man mit dem Posten von Videos auf Douyin Geld verdienen? Nachdem Sie ein Video gepostet und eine bestimmte Anzahl an Aufrufen auf Douyin erreicht haben, haben Sie die Möglichkeit, am Werbe-Sharing-Plan teilzunehmen. Diese Einkommensmethode ist eine der bekanntesten unter Douyin-Benutzern und stellt auch für viele YouTuber die Haupteinnahmequelle dar. Douyin entscheidet anhand verschiedener Faktoren wie Kontogewicht, Videoinhalt und Publikumsfeedback, ob Möglichkeiten zum Teilen von Werbung bereitgestellt werden sollen. Die TikTok-Plattform ermöglicht es Zuschauern, ihre Lieblingsschöpfer durch das Versenden von Geschenken zu unterstützen.

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

Auf iOS-Geräten können Sie mit der Kamera-App Zeitlupenvideos aufnehmen, oder sogar 240 Bilder pro Sekunde, wenn Sie das neueste iPhone besitzen. Mit dieser Funktion können Sie High-Speed-Aktionen detailreich erfassen. Aber manchmal möchten Sie vielleicht Zeitlupenvideos mit normaler Geschwindigkeit abspielen, damit Sie die Details und das Geschehen im Video besser wahrnehmen können. In diesem Artikel erklären wir alle Methoden zum Entfernen von Zeitlupe aus vorhandenen Videos auf dem iPhone. So entfernen Sie Zeitlupe aus Videos auf dem iPhone [2 Methoden] Sie können die Fotos-App oder die iMovie-App verwenden, um Zeitlupe aus Videos auf Ihrem Gerät zu entfernen. Methode 1: Mit der Fotos-App auf dem iPhone öffnen

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

Mit dem Aufkommen von Kurzvideoplattformen ist Xiaohongshu für viele Menschen zu einer Plattform geworden, auf der sie ihr Leben teilen, sich ausdrücken und Traffic gewinnen können. Auf dieser Plattform ist die Veröffentlichung von Videoarbeiten eine sehr beliebte Art der Interaktion. Wie veröffentlicht man also Xiaohongshu-Videoarbeiten? 1. Wie veröffentliche ich Xiaohongshu-Videowerke? Stellen Sie zunächst sicher, dass Sie einen Videoinhalt zum Teilen bereit haben. Sie können zum Fotografieren Ihr Mobiltelefon oder eine andere Kameraausrüstung verwenden, Sie müssen jedoch auf die Bildqualität und die Klarheit des Tons achten. 2. Bearbeiten Sie das Video: Um die Arbeit attraktiver zu gestalten, können Sie das Video bearbeiten. Sie können professionelle Videobearbeitungssoftware wie Douyin, Kuaishou usw. verwenden, um Filter, Musik, Untertitel und andere Elemente hinzuzufügen. 3. Wählen Sie ein Cover: Das Cover ist der Schlüssel, um Benutzer zum Klicken zu bewegen. Wählen Sie ein klares und interessantes Bild als Cover, um Benutzer zum Klicken zu bewegen.

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

1. Öffnen Sie zunächst Weibo auf Ihrem Mobiltelefon und klicken Sie unten rechts auf [Ich] (wie im Bild gezeigt). 2. Klicken Sie dann oben rechts auf [Zahnrad], um die Einstellungen zu öffnen (wie im Bild gezeigt). 3. Suchen und öffnen Sie dann [Allgemeine Einstellungen] (wie im Bild gezeigt). 4. Geben Sie dann die Option [Video Follow] ein (wie im Bild gezeigt). 5. Öffnen Sie dann die Einstellung [Video-Upload-Auflösung] (wie im Bild gezeigt). 6. Wählen Sie abschließend [Originalbildqualität] aus, um eine Komprimierung zu vermeiden (wie im Bild gezeigt).

Zwei Lösungen zum Teilen von Edge-Browser-Webvideos ohne Ton Zwei Lösungen zum Teilen von Edge-Browser-Webvideos ohne Ton Mar 14, 2024 pm 02:22 PM

Viele Benutzer schauen sich gerne Videos im Browser an, wenn beim Ansehen von Webvideos im Edge-Browser kein Ton zu hören ist. Wie kann das Problem gelöst werden? Dieses Problem ist nicht schwierig. Lassen Sie mich als Nächstes erklären, wie Sie das Problem beheben können, dass in Edge-Browser-Webvideos kein Ton zu hören ist. In Edge-Browser-Webvideos ist kein Ton zu hören? Methode 1: 1. Überprüfen Sie zunächst die obere Registerkarte des Edge-Browsers. 2. Auf der linken Seite der Registerkarte befindet sich eine „Sound-Schaltfläche“. Stellen Sie sicher, dass diese nicht stummgeschaltet ist. Methode 2: 1. Wenn bestätigt wird, dass der Ton nicht stummgeschaltet ist, liegt möglicherweise ein Problem mit der Toneinstellung vor. 2. Sie können mit der rechten Maustaste auf das Audiogerät in der unteren rechten Ecke klicken und „Lautstärkesynthesizer öffnen“ auswählen. 3. Öffnen

Douyin 15 Sekunden ist zu kurz und ich möchte es verlängern. Wie kann ich es verlängern? Wie erstelle ich ein Video, das länger als 15 Sekunden ist? Douyin 15 Sekunden ist zu kurz und ich möchte es verlängern. Wie kann ich es verlängern? Wie erstelle ich ein Video, das länger als 15 Sekunden ist? Mar 22, 2024 pm 08:11 PM

Mit der Popularität von Douyin teilen immer mehr Menschen ihr Leben, ihre Talente und ihre Kreativität gerne auf dieser Plattform. Die 15-Sekunden-Begrenzung von Douyin gibt vielen Nutzern das Gefühl, dass es nicht unterhaltsam genug ist, und hofft, die Videodauer zu verlängern. Wie können Sie also die Videodauer auf Douyin verlängern? 1. Douyin 15 Sekunden ist zu kurz. Wenn Sie es verlängern möchten, wie können Sie es verlängern? 1. Der bequemste Weg, mehrere Videos aufzunehmen und zusammenzufügen, besteht darin, mehrere 15-Sekunden-Videos aufzunehmen und sie dann mit der Bearbeitungsfunktion von Douyin zu kombinieren. Achten Sie bei der Aufnahme darauf, am Anfang und Ende jedes Videos etwas Leerraum für das spätere Zusammenfügen zu lassen. Die Länge des gespleißten Videos kann mehrere Minuten betragen. Dies kann jedoch dazu führen, dass der Videobildschirm zu häufig wechselt, was das Seherlebnis beeinträchtigt. 2. Verwenden Sie Douyin-Spezialeffekte und Aufkleber. Douyin bietet eine Reihe von Spezialeffekten

See all articles