Einfügen von Videos auf der Seite: Verwenden Sie Javascript und Flash

  1. Autor der Veröffentlichung
  2. x64 (auch bekannt als andi)

vor einiger zeit habe ich den video tag erwähnt, der speziell in html5 implementiert wurde

vor einiger zeit habe ich den video tag erwähnt, der speziell in html5 implementiert wurde. Leider führt die Verwendung des Tags eher zu Unannehmlichkeiten als zu Vorteilen. Daher werde ich Ihnen erläutern, wie Sie mit einem Videoformat vollständig arbeiten können.

Für ein Projekt musste ich die Möglichkeit finden, Videos auf der Site zu entfernen. Es war nicht möglich, einen Player mit einem Blitz von Grund auf neu zu erstellen (zunächst hatte ich keine Entwicklungsumgebung und stellte sie nicht zur Verfügung). Daher war es in der Tat erforderlich, einen geeigneten Kandidaten für einen Flash-Player zu finden. es war nichts besonders kompliziertes nötig, da dank YouTube die Navigation in dieser Art von Playern sehr einfach ist;)

2 Kandidaten befinden sich auf den Seiten flv-mp3.com (ein Projekt von uppodʻa) und Flowplayer . nachdem jeder einen kleinen Stoß gemacht hatte, wurde der erste schnell zugunsten des Mähdreschers aufgegeben, der die vorliegende API lieferte. Wie die Zeit gezeigt hat, hat mich der innere Darm nicht im Stich gelassen (obwohl einige Leute es geschafft haben, in vtyuhat flv-mp3.com einzusteigen).

Wie Sie wissen, täuscht der erste Eindruck, und manchmal wird das am wenigsten gesättigte Gerät bevorzugt (insbesondere, wenn es die Muttersprache verwendet). Es ist dieser Ansatz, der bei flv-mp3 gefragt war: Der Dienst bietet die Möglichkeit, einen Player mit bestimmten Eigenschaften (in bilden Geben Sie die wiedergegebene Datei, den Bildschirmschoner, die Abmessungen und einige andere Parameter an und rufen Sie den Ausgabecode zum Einfügen der Datei ab. Ja, die Option scheint sehr praktisch zu sein, besonders für Leute, die HTML als starke Hexe betrachten, ganz zu schweigen von js und so weiter.

Es ist unwahrscheinlich, dass nur das regelmäßige Hinzufügen von Videos zur Website zur Begeisterung beiträgt, den Player ständig selbst zu „konstruieren“. Alternativ können Sie alle Einstellungen untersuchen und über die Serversprache automatisieren. Dieses Prinzip kann jedoch nur als verzerrt bezeichnet werden (es ist viel einfacher, Videos auf YouTube zu laden und den fertigen Code zum Herunterladen zu erhalten).

hier kommen wir zu genau dem, was man schon als Zauberin bezeichnen kann. Sie möchten Javascript Magie verstehen? Ich werde zeigen, dass es überhaupt nicht schwierig ist (noch einfacher als die Verwendung eines Konstruktors). und hilf mit diesem Flowplayer. Sie können eine Version auswählen von hier aus , aber die allererste Version, die unter der GPL3 vertrieben wird, ist durchaus für Ihre Site geeignet.

Der Player unterstützt die Wiedergabe der folgenden Inhalte: flv, mp4, m4v (für Bilder - jpg, gif, png). Das Video wird seit Version 9 unterstützt, daher sollte es keine Supportprobleme geben.

Laden Sie das Archiv mit dem Player herunter und entpacken Sie es. Sie müssen 3 Dateien auf die Site hochladen: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf und example / flowplayer-NumVer.min.js , wobei NumVer nur die Versionsnummer ist und beispielsweise 3.2.7 sein kann .

Die erste Datei enthält die Systemsteuerung, die zweite - direkt den Player und die dritte ist der Link, der die API bereitstellt. Die ersten 2 Dateien (* .swf) müssen sich im selben Ordner befinden. Jetzt ist es Zeit für den einfachsten Code. es kann sein:

<div id = "player" style = "width: 640px; height: 480px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {}); </ script>

Das div- Element mit der Player-ID ist der Container, in den das Video verschoben wird. In der zweiten Zeile steht die Javascript-Dateiverbindung. Direkt für die Ausgabe ist eine Funktion flowplayer () zuständig , die 3 Parameter übergibt:

  1. die Kennung des Elements, in dem das Video abgespielt werden soll;
  2. den Pfad zum Player (nämlich zum Player und nicht zu den Steuerelementen, die automatisch geladen werden);
  3. Einige zusätzliche Parameter.

Neben dem Bezeichner können Sie übrigens einen Verweis direkt an ein Objekt oder einen Selektor übergeben.

Der obige Code zeigt nichts an, gibt jedoch eine Vorstellung davon, wie einfach es ist, einen Flowplayer mit einer Seite zu verbinden. Um ein Video auszugeben, müssen Sie einen dritten Parameter erstellen, und das ist übrigens auch ganz einfach.

Der Einfachheit halber: Der dritte Parameter (config) ist ein assoziatives Array, in dem die folgenden Elemente beschrieben werden können:

  • Clip - Mit dieser Taste können Sie globale Einstellungen vornehmen, z. B. ob Sie automatisch das Puffern (AutoBuffering) oder das Abspielen (AutoPlay) starten möchten, wie der Inhalt skaliert wird (Skalieren mit dem Wert von Fit behält das ursprüngliche Seitenverhältnis bei und wird für normales Video verwendet). vielleicht nur es). Sie können auch die wiedergegebene Datei (URL) angeben und sogar Ereignisse aussetzen (Funktionen, die zum Beispiel aufgerufen werden, wenn der Film abgespielt wird).
  • Wiedergabeliste ist ein reguläres Array (Liste). Jedes Element kann eine Zeichenfolge (in diesem Fall ist die Zeichenfolge die Adresse des wiedergegebenen Clips) oder ein assoziatives Array sein. im zweiten Fall kann der Datensatz als Datensatz angesehen werden, der dem Clip- Schlüssel des vorherigen Elements ähnelt, d. h. Sie können festlegen, dass die Pufferung verwendet werden soll, die Wiedergabe beginnen soll und so weiter.
  • Plugins - Dient zum Erweitern der Standardfunktionen. Eines der Merkmale ist die Möglichkeit, die Schnittstelle direkt vor Ort zu russifizieren.

Nun ein kleines Beispiel, das eine Demonstration der Möglichkeiten beinhaltet:

<div id = "player" style = "width: 520px; height: 330px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: false, autoBuffering: false, scaling : 'fit'}, Wiedergabeliste: [{url: 'https: //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg', autoBuffering: true, autoPlay: true}, 'http: // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], // um die Steuerelemente des Plugins zu manipulieren: {controls: {url:' flowplayer.controls-3.2.16.swf ', playlist: false , // Entfernt die Rückspultasten stop: true, // Stopptaste hinzufügen scrubber: true // false Deaktiviert das Scrollen des Videos}}}); </ script>

Der vorgestellte Code legt die folgenden globalen Einstellungen fest: Deaktivieren der automatischen Startwiedergabe, Deaktivieren der automatischen Pufferung, Skalieren des Videos, um es an das Fenster anzupassen. Als abspielbare Datei werden ein Bild und ein Video verwendet und die Einstellungen für das Bild werden überschrieben (da es automatisch geladen werden sollte). Wenn Sie auf das Bild (oder die Wiedergabetaste) klicken, wird das Video angezeigt. Wie Sie sehen, ist alles sehr einfach. Wenn Sie einen weiteren Videoclip hinzufügen möchten, fügen Sie der Wiedergabeliste einfach ein neues Element hinzu, das durch ein Komma getrennt ist. Wenn die automatische Wiedergabe der Wiedergabeliste erforderlich ist, wird im assoziativen Array- Clip der Wert von autoPlay auf true festgelegt.

Dokumentation mit API-Funktionen befindet hier . wenn jemand kein englisch versteht - egal, da ist alles ganz klar. und nach der Analyse des obigen Codes ist es durchaus möglich zu verstehen, was sich in den Docks befindet. Ich empfehle einen Blick, es wird sicher eine "Einstellung" geben, die gefragt sein wird.

Beispiel kann schau hier . Vergiss nicht, dir den Quellcode anzuschauen (Strg + U)

Autor der Veröffentlichung

offline 1 Woche

x64 (auch bekannt als andi)

Anmerkungen: 2842 Veröffentlichungen: 395 Anmeldung: 02-04-2009

Sie möchten Javascript Magie verstehen?