Einführung in das HTML5-Videowiedergabe-Plug-in video.js

video.js ist ein sehr beliebtes HTML5-Videowiedergabe-Plug-in. Es eignet sich sehr gut zum Abspielen von Videos auf mobilen Endgeräten (z. B. WeChat-Webseiten), unterstützt das Downgrade auf Flash und ist mit IE8 kompatibel. Offizielle Website: http://videojs.com/ git&demo: http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip

„controls“ stellt die Steuerleiste dar, „prload: preloading“ und „poster“ das anfänglich angezeigte Bild. Der Datensatz unterstützt die Verwendung von JSON zum Festlegen einiger Parameter. Es erübrigt sich zu erwähnen, dass sich die Quelle auf die Untertitel bezieht.

Auf diese Weise kommt es heraus, aber in Wirklichkeit haben wir andere Bedürfnisse.

Sie müssen novtts js anwenden, das sich in der Alt-Datei der Demo befindet. Auf diese Weise wird die Buchstabenauswahl nicht in der Videosteuerleiste angezeigt. Natürlich benötigen Sie das Track-Element in der Seite nicht mehr.

 <link href=~/js/video-js-5.11.4/alt/video-js-cdn.min.css rel=stylesheet /><script src=~/js/video-js-5.11.4/alt/ video.novtt.min.js></script>

Ich habe angefangen, es selbst mit CSS einzurichten, habe aber festgestellt, dass nichts funktioniert hat. Videoelemente unterscheiden sich von gewöhnlichen Elementen dadurch, dass sie durch Festlegen des Verhältnisses der internen Elemente eine reaktionsfähige Breite und Höhe erreichen müssen. video.js bietet zwei Methoden.

js: Setze eine Flüssigkeit auf true.

 var player = videojs('video', { fluid: true }, function () { console.log('Good to go!'); this.play(); // wenn Sie der automatischen Wiedergabe aus irgendeinem Grund nicht vertrauen } )

Dazu muss aber auch eine Startbreite und -höhe für das Videoelement festgelegt werden, da sonst das Startbild nicht sichtbar ist.

CSS: Stile können direkt hinzugefügt werden. Es gibt drei Typen: .vjs-fluid, .vjs-4-3, .vjs-16-9. Der erste wird automatisch berechnet und die beiden letzteren geben das Verhältnis an. Der Stil muss auch die Startbreite und -höhe festlegen, um das Bild anzuzeigen.

 <video id=video class=video-js vjs-default-skin vjs-fluid poster=http://vjs.zencdn.net/v/oceans.png width=375 height=200 steuert preload=none data-setup=' { html5 : { nativeTextTracks : false } }'> <source [email protected] type=video/mp4> <p class=vjs-no-js> Zum Abspielen von Videos muss JavaScript aktiviert sein. Es wird empfohlen, einen <a href=http://videojs.com/html5-video-support/ target=_blank> Browser zu verwenden, der HTML5 unterstützt /a> für den Zugriff. </p> </video>

Veranstaltungshinweis:

Wir konzentrieren uns im Allgemeinen auf die drei Ereignisse Start, Pause und Ende

 var player = videojs('video', { }, function () { console.log('Good to go!'); //this.play(); // wenn Sie der automatischen Wiedergabe aus irgendeinem Grund nicht vertrauen }) ; player.on('play', function () { console.log('Play starten/fortsetzen'); }); player.on('pause', function () { console.log('Play pausieren'); }); player.on('ended', function () { console.log('Ended playing'); });

Es gibt auch Update-Events:

 player.on('timeupdate', function() { console.log(player.currentTime()); });

Sie können feststellen, ob das Video endet, indem Sie beurteilen, ob die aktuelle Zeit und die Gesamtzeit gleich sind:

 player.on('timeupdate', function () { // Wenn currentTime() === Dauer(), ist die Wiedergabe des Videos beendet. Wenn (player.duration() != 0 && player.currentTime() === Spieler .duration()) { // Ende der Wiedergabe} });

Einige Senioren wiesen darauf hin, dass das beendete Ereignis auf Android-Geräten nicht korrekt ausgelöst wird (seien Sie zuerst vorbereitet).

Die standardmäßige iis-MIME-Einstellung fügt den MP4-Typ nicht hinzu. Bei der lokalen Wiedergabe tritt kein Problem auf, es tritt jedoch ein 404-Fehler auf, wenn sie den Server erreicht. Dies erfordert die Einstellung von MIME in iis:

Das FLV-Format wird mit der zugehörigen Erweiterung hinzugefügt: .flv, Inhaltstyp: application/octet-stream

Das f4v-Format hat die Erweiterung: .f4v, Inhaltstyp: application/octet-stream

Das mp4-Format hat die Erweiterung: .mp4, Inhaltstyp: video/mp4

Das ogv-Format hat die Erweiterung: .ogv, Inhaltstyp: video/ogg

Das WebM-Format hat die Erweiterung: .webm, Inhaltstyp: Video/WebM

Starten Sie iis neu, nachdem die Einstellung wirksam wurde.

Der Beamte gab eine Codepen-Adresse http://codepen.io/heff/pen/EarCt an, die Sie bearbeiten und mit der Sie spielen können. Hauptsächlich die Wiedergabetaste, die Steuerleiste und der Fortschrittsbalken. Die Standardeinstellung ist wie oben.

Es gibt auch dieses: http://codepen.io/zanechua/pen/GozrNe SublimeVideo

Die Wiedergabetechnologie wird zum Abspielen von Video- oder Audiodateien in Browsern oder Plug-Ins verwendet. Wenn es sich um h5 handelt, werden Video- oder Audioelemente verwendet. Wenn es sich um Flash handelt, wird ein Flash-Player definiert. Nicht nur Flash, sondern unterstützt auch Silverlight, Quicktime und andere Technologien für die Wiedergabe. Die Dateneinrichtung kann direkt im Element definiert werden. Geben Sie unterstützte Technologien an.

 <video data-setup='{techOrder: [html5, flash, andere unterstützte Technologie]}'

Oder verwenden Sie JavaScript:

 videojs(videoID, { techOrder: [html5, flash, andere unterstützte Technologie]});

Die Standardregel hier ist, dass die erste Technologie zum Spielen verwendet wird, und wenn sie fehlschlägt, werden die nachfolgenden Optionen verwendet. Wenn oben beispielsweise an erster Stelle HTML5 geschrieben ist, werden alle Videos mit HTML5 abgespielt. Wenn wir möchten, dass Flash Vorrang hat, setzen Sie es einfach voran:

 data-setup='{ techOrder: [flash,html5] }'

In den Seitenelementen finden Sie, dass video.js uns das von uns verwendete Flash-Objekt liefert.

Fügen Sie das Autoplay-Attribut zum Videoelement hinzu oder fügen Sie autoplay:true zu js hinzu

 <video id=video autoplay poster=/images/bk.png width=375 height=200 Controls preload=none > </video>

oder

 var player = videojs('video', { autoplay:true }, function () { console.log('Good to go!'); //this.play(); // Versicherung, Sie können Play auch aktiv aufrufen( ) });

Autoplay ist immer nervig, das Gegenteil ist also, das Autoplay-Attribut zu löschen oder auf „false“ zu setzen.

andere:

video.js unterstützt Erweiterungs-Plug-Ins, was sehr praktisch ist.

 //Definieren Sie eine Plug-In-Funktion examplePlugin(options) { this.on('play', function (e) { console.log('playback has selected!'); } } //Registrieren Sie videojs.plugin(' examplePlugin' , examplePlugin); // Use player.examplePlugin({ exampleOption: true });

Die API des Players kann direkt im Plug-in aufgerufen werden. Es gibt ein Playlist-Plug-in, das Sie studieren können, wenn Sie eine Playlist benötigen. https://github.com/brightcove/videojs-playlist und http://videojs.com/advanced/ haben diesen Effekt:

Das Obige ist die Einführung des vom Herausgeber eingeführten HTML5-Videowiedergabe-Plugins video.js. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten . Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!