vue mediaelement

vue-mediaelement

Vidéo-joueur en direct

Installer

$ npm install vue-mediaelement

Importer

Importer à l'aide du module

Importez des composants dans votre projet:

 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 ;

Et enregistrer les composants:

 Vue . component ( 'mediaelement' , Mediaelement ) ;

Importation à l'aide de la balise de script

 < 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
  }
} ) ; 

Usage

Travaille sur une instance Vue:

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

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

Options

Accessoires

Option	Taper	Description	Défaut
source	Chaîne	Spécifie l'URL du fichier vidéo; Cette valeur peut également être indiquée par des balises source (reportez-vous à la section des codecs multiples pour plus d'informations)	''
largeur	Chaîne	Définit la largeur du lecteur vidéo dans Pixels; Vous pouvez également indiquer des pourcentages	480
hauteur	Chaîne	Définit la hauteur du lecteur vidéo en pixels; Vous pouvez également indiquer des pourcentages	270
précharge	Chaîne	Spécifie si et comment l'auteur pense que la vidéo doit être chargée lorsque la page se charge; Valeurs possibles: auto , metadata ou none (recommandée)	aucun
en place automatique	Booléen	Spécifie que la vidéo commencera à jouer dès qu'elle sera prête	FAUX
forcel	Booléen	S'il est réglé sur true, le message de diffusion en direct sera affiché et la barre de progression sera cachée, peu importe si la durée est un numéro valide	vrai

Événements

Nom de l'événement	Taper	Description
succès	rappel	Action (s) qui sera exécutée dès que la source sera chargée; passe 2 arguments: support (l'emballage qui imite tous les événements / propriétés / méthodes natifs pour tous les rendus) et le nœud (la balise HTML, audio ou iframe d'origine où le support a été chargé à l'origine; si HTML5 est utilisé, les médias et le nœud sont essentiellement les mêmes)
erreur	rappel	Action (s) qui sera exécutée si la source ne se charge pas pour aucune raison. Passe les mêmes arguments que le succès

FAQ

Comment programmer la médiation à un élément?

Utilisez la méthode Ref et appelez remove() .

 this . $refs . mediaelement . remove ( newIndex )

Pour plus de détails, veuillez vous référer à l'exemple de code.

Développement

Regarder avec une recharge à chaud:

$ npm run dev

Développer sur un appareil réel:

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

Licence

Mit