Erstellen Sie einen kostenlosen WEB-Videoplayer basierend auf Flowplayer mit Quellcode-Javascript-Kenntnissen

Flowplayer ist ein Open-Source-WEB-Videoplayer (GPL 3). Sie können den Player in Ihre Webseite einbetten. Wenn Sie Entwickler sind, können Sie die relevanten Parameter des Players auch frei anpassen und konfigurieren, um den gewünschten Wiedergabeeffekt zu erzielen. In diesem Artikel wird hauptsächlich die Verwendung von Flowplayer vorgestellt.

Demo ansehen Quellcode herunterladen

Flowplayer unterstützt die Wiedergabe von Streaming-Medien wie FLV-, SWF- und Bilddateien. Er kann Videodateien sehr reibungslos abspielen und unterstützt die benutzerdefinierte Konfiguration und Erweiterung.

1. Flowplayer.js laden

Fügen Sie flowplayer.js zwischen dem Kopf der Seite hinzu, auf der Sie das Video abspielen möchten.

<script type="text/javascript" src="js/flowplayer-3.2.6.min.js"></script> 

Sie können die neueste Version von der offiziellen Website von flowplyer herunterladen: http://flowplayer.org/download/index.html

2. XHTML

Fügen Sie den folgenden Code dort ein, wo Sie den Player hinzufügen müssen:

<a href="flowplayer.flv" style="display:block;width:520px;height:330px" id="player"></a>

Richten Sie das href-Attribut des a-Tags auf die abzuspielende Videoadresse, legen Sie dann den Stil, die Breite und die Höhe fest und legen Sie display:block fest. Der Schlüssel besteht natürlich darin, eine ID für das a-Tag anzugeben, um dies zu erleichtern JS-Aufrufe.

Natürlich können Sie auch einfach einen DIV in HTML angeben und dann Javascript verwenden, um die Wiedergabeadresse zu steuern, wie zum Beispiel:

<div id="player2" style="width:520px; height:330px"> </div>

3. Javascript

Fügen Sie unten auf der Seite ein Javascript-Skript ein, um den Player aufzurufen:

<script type="text/javascript"> 
flowplayer("player", "flowplayer-3.2.7.swf"); 
</script>

Verwenden Sie die Funktion flowplayer(), um den Player aufzurufen. Der erste Parameter ist der Pfad des Players. Stellen Sie sicher, dass der Pfad des Players korrekt ist .

Wenn Sie die Videodatei nicht mit einem Tag, sondern mit DIV aufrufen, lautet der Code wie folgt:

flowplayer( 
 "player2", 
 "flowplayer-3.2.7.swf",{ 
 clip: { 
 url: "flowplayer.flv", 
 autoPlay: false, 
 autoBuffering: true 
 } 
 } 
); 

Der dritte Parameter der flowplayer()-Funktion kann für mehrere Einstellungen verwendet werden, bei denen es sich eigentlich um erweiterte Einstellungen handelt. Die URL in der Clip-Methode: gibt die tatsächliche Adresse der Videodatei an, autoPlay: gibt an, ob automatisch abgespielt werden soll, der Standardwert ist true, autoBuffering: gibt an, ob automatisch gepuffert werden soll, das heißt, wenn die Videodatei so eingestellt ist, dass sie nicht automatisch abgespielt wird , lädt der Player den Inhalt der Videodatei dennoch im Voraus herunter.

flowplayer unterstützt auch viele erweiterte Einstellungen wie Wiedergabelisten und Skin-Einstellungen. Für spezifische Einstellungen können interessierte Schüler Folgendes besuchen: http://flowplayer.org/documentation/configuration/index.html.