vue mediaelement

vue-media

Video reproductor en vivo

Instalar

$ npm install vue-mediaelement

Importar

Importar usando el módulo

Importar componentes a su proyecto:

 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 ;

Y registrar componentes:

 Vue . component ( 'mediaelement' , Mediaelement ) ;

Importar usando la etiqueta 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
  }
} ) ; 

Uso

Trabajar en una instancia de Vue:

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

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

Opción

Accesorios

Opción	Tipo	Descripción	Por defecto
fuente	Cadena	Especifica la URL del archivo de video; Este valor también se puede indicar con etiquetas de origen (consulte la sección de códecs múltiples para obtener más información)	''
ancho	Cadena	Establece el ancho del reproductor de video en píxeles; También puede indicar porcentajes	480
altura	Cadena	Establece la altura del reproductor de video en píxeles; También puede indicar porcentajes	270
precargar	Cadena	Especifica si el autor cree que el video debe cargarse cuando se carga la página; Valores posibles: auto , metadata o none (recomendado)	ninguno
autoplaz	Booleano	Especifica que el video comenzará a reproducirse tan pronto como esté listo	FALSO
atropellado	Booleano	Si se establece en True, se mostrará el mensaje de transmisión en vivo y la barra de progreso se ocultará, sin importar si la duración es un número válido	verdadero

Eventos

Nombre del evento	Tipo	Descripción
éxito	llamar de vuelta	Acción (s) que se ejecutará tan pronto como se cargue la fuente; Pase 2 argumentos: Medios (el envoltorio que imita todos los eventos/propiedades/métodos nativos para todos los renderistas) y el nodo (el video HTML original, el audio o la etiqueta de iframe donde los medios se cargaron originalmente; si se usa HTML5, los medios y el nodo son básicamente el mismo)
error	llamar de vuelta	Acción (s) que se ejecutará si la fuente no se carga por ningún motivo. Pasa los mismos argumentos que el éxito

Preguntas frecuentes

¿Cómo programar medias de medias a un elemento?

Use el método REF y llame remove() .

 this . $refs . mediaelement . remove ( newIndex )

Para obtener más detalles, consulte el código de ejemplo.

Desarrollo

Mirando con la retroceso caliente:

$ npm run dev

Desarrollar en un dispositivo remoto real:

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

Licencia

MIT