veltec-multi-video

Webcomponent para rodar vários vídeos em sincronia

Usage no npm install needed!

<script type="module">
  import veltecMultiVideo from 'https://cdn.skypack.dev/veltec-multi-video';
</script>

README

<veltec-multi-video>

Webcomponent para rodar vários vídeos em sincronia

Instalar o polymer-CLI

$ npm i -g polymer-cli

Visualizar o componente

$ polymer serve

Utilizar o componente

Importação da tag

    <veltec-multi-video id="mv" ></veltec-multi-video>

Parâmetros da tag

Nome Descrição Exemplo
videos Array dos vídeos a serem reproduzidos [{url: 'sua-url.mp4', id: 'id-unico'}]
marker Marcação na barra de progresso do vídeo {start: 4, duration: 5, color: 'rgb(200,0,0)'}

Objeto Video

Nome Descrição Tipo
url URL do vídeo String
id ID único do vídeo String ou Number

Objeto Marker

Nome Descrição Tipo
start Começo da marcação na barra de progresso (em segundos) Number
duration Duração da marcação (em segundos) Number
color Cor usada na marcação (rgb, color, rgba ou hex) String

Testar o componente

$ polymer serve

Abrir no navegador localhost:PORT/components/veltec-multi-video/test/

Gerar pacote de build

AngularJS

Copiar pasta veltec-multi-video de dentro da build e colar no projeto angularJS.

$ polymer build

Angular

Na pasta do componente, rode

$ npm pack

No projeto Angular, rode

$ npm i /path/to/veltec-multi-video.tgz