vue mediaelement

Vue-Mediaelement

Video Live -Spieler

Installieren

$ npm install vue-mediaelement

Import

Mit Modul importieren

Importieren von Komponenten in Ihr Projekt:

 require ( 'vue-mediaelement/dist/vue-mediaelement.css' ) ;

// in ES6 modules
import { Mediaelement } from 'vue-mediaelement' ;

// in CommonJS
const { Mediaelement } = require ( 'vue-mediaelement' ) ;

// in Global variable
const { Mediaelement } = VueMediaelement ;

Und Komponenten registrieren:

 Vue . component ( 'mediaelement' , Mediaelement ) ;

Mit Skript -Tag importieren

 < link rel =" stylesheet " href =" ../node-modules/vue-mediaelement/dist/vue-mediaelement.css " charset =" utf-8 " >
< script src =" ../node-modules/vue-mediaelement/dist/vue-mediaelement.js " > </ script > 

 const vueMediaelement = VueMediaelement . Mediaelement ;

new Vue ( {
  el : 'body' ,
  components : {
    'mediaelement' : vueMediaelement
  }
} ) ; 

Verwendung

Arbeiten Sie an einer VUE -Instanz:

 < mediaelement class =" my-play " > </ mediaelement > 

. my-play {
  height : 200 px ;
  text-align : center;
}

Optionen

Requisiten

Option	Typ	Beschreibung	Standard
Quelle	Saite	Gibt die URL der Videodatei an; Dieser Wert kann auch mit Quell -Tags angezeigt werden (finden Sie im Abschnitt Mehrer Codecs für weitere Informationen).	'' '
Breite	Saite	Legt die Breite des Videoplayers in Pixel fest. Sie können auch Prozentsätze angeben	480
Höhe	Saite	Legt die Höhe des Videoplayers in Pixel fest. Sie können auch Prozentsätze angeben	270
Vorspannung	Saite	Gibt an, ob und wie der Autor der Meinung ist, dass das Video geladen werden sollte, wenn die Seite geladen wird. Mögliche Werte: auto , metadata oder none (empfohlen)	keiner
Autoplay	Boolean	Gibt an, dass das Video mit dem Spielen beginnt, sobald es fertig ist	FALSCH
wirbelig	Boolean	Wenn auf True festgelegt wird, wird die Live -Broadcast -Nachricht angezeigt und die Fortschrittsleiste versteckt, egal ob die Dauer eine gültige Nummer ist	WAHR

Ereignisse

Ereignisname	Typ	Beschreibung
Erfolg	Rückruf	Aktionen, die ausgeführt werden, sobald die Quelle geladen wird; Übergeht 2 Argumente: Medien (der Wrapper, der alle nativen Ereignisse/Eigenschaften/Methoden für alle Renderer nachahmt) und Knoten (das ursprüngliche HTML -Video, Audio- oder Iframe -Tag, bei dem das Medium ursprünglich geladen wurde; wenn HTML5 verwendet wird, Medien und Knoten sind im Grunde dasselbe)
Fehler	Rückruf	Aktionen, die ausgeführt werden, wenn die Quelle aus irgendeinem Grund nicht geladen wird. Pässt die gleichen Argumente wie Erfolg

FAQ

Wie kann ich programminhalte Medien zu einem Artikel programmieren?

Verwenden Sie Ref und Call remove() -Methode.

 this . $refs . mediaelement . remove ( newIndex )

Weitere Informationen finden Sie unter Beispielcode.

Entwicklung

Beobachten mit heißem Relad:

$ npm run dev

Entwickeln Sie sich auf echtem Remote -Gerät:

$ npm run remote-dev {{ YOUR IP ADDRESS }}

Lizenz

MIT