vue mediaelement

Vue-mediaelement

Player de vídeo ao vivo

Instalar

$ npm install vue-mediaelement

Importar

Importação usando o módulo

Importar componentes para o seu projeto:

 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 ;

E registrar componentes:

 Vue . component ( 'mediaelement' , Mediaelement ) ;

Importar usando tag 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

Trabalhe em uma instância de Vue:

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

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

Opções

Adereços

Opção	Tipo	Descrição	Padrão
fonte	Corda	Especifica o URL do arquivo de vídeo; Este valor também pode ser indicado com tags de origem (consulte a seção vários codecs para obter mais informações)	''
largura	Corda	Define a largura do videoclipe em pixels; Você também pode indicar porcentagens	480
altura	Corda	Define a altura do player de vídeo em pixels; Você também pode indicar porcentagens	270
pré -carga	Corda	Especifica se e como o autor pensa que o vídeo deve ser carregado quando a página carregar; Valores possíveis: auto , metadata ou none (recomendado)	nenhum
AutoPlay	Booleano	Especifica que o vídeo começará a reproduzir assim que estiver pronto	falso
Forcelive	Booleano	Se definido como true, a mensagem de transmissão ao vivo será exibida e a barra de progresso será oculta, não importa se a duração é um número válido	verdadeiro

Eventos

Nome do evento	Tipo	Descrição
sucesso	ligar de volta	Ações (s) que serão executadas assim que a fonte for carregada; Passa 2 argumentos: Mídia (o invólucro que imita todos os eventos/propriedades/métodos nativos para todos os renderizadores) e o nó (o vídeo HTML original, o áudio ou a tag de iframe onde a mídia foi carregada originalmente;
erro	ligar de volta	Ações (s) que serão executadas se a fonte não carregar por nenhum motivo. Passa os mesmos argumentos que o sucesso

Perguntas frequentes

Como programar mediarelement para um item?

Use o método Ref e Chamada remove() .

 this . $refs . mediaelement . remove ( newIndex )

Para mais detalhes, consulte o código de exemplo.

Desenvolvimento

Assistindo com o Reload Hot:

$ npm run dev

Desenvolva -se em um dispositivo remoto real:

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

Licença

Mit