@zeedhi/zd-video-vue

ZdVideo

O componente ZdVideo é usado para renderizer um player de vídeo.

Instalação

O ZdVideo é composto pelos pacotes @zeedhi/zd-video-common e @zeedhi/zd-video-vue. Utilize o comando abaixo para instalar ambos automaticamente:

npm install @zeedhi/zd-video

Ou instale os pacotes separadamente:

npm install @zeedhi/zd-video-vue @zeedhi/zd-video-common

Registro do Componente

Para registrá-lo, adicione o seguinte código ao inicializar a aplicação (por exemplo no arquivo zeedhi.ts)

import Vue from 'vue';
import { ZdPlayer, ZdYoutube, ZdDailymotion, ZdVideo, ZdVimeo  } from '@zeedhi/zd-video'; 
// import { ZdPlayer, ZdYoutube, ZdDailymotion, ZdVideo, ZdVimeo } from '@zeedhi/zd-video-vue'; caso tenha instalado os pacotes separadamente

Vue.component('ZdPlayer', ZdPlayer);
Vue.component('ZdYoutube', ZdYoutube);
Vue.component('ZdDailymotion', ZdDailymotion);
Vue.component('ZdVideo', ZdVideo);
Vue.component('ZdVimeo', ZdVimeo);

Uso Básico

Para utilizá-lo em um Metadata, basta definir a propriedade component como "ZdPlayer" e em seu children desse component definir o "ZdVideo".

{
  "name": "video-basic-usage",
  "component": "ZdPlayer",
  "controlsSettings": {
    "noSettings": true
  },
  "children": [
    {
      "name": "youtube-basic-usage",
      "component": "ZdVideo",
      "poster": "https://media.vimejs.com/poster.png",
      "crossOrigin": true,
      "dataSrc": "https://media.vimejs.com/720p.mp4",
      "type": "video/mp4",
      "subtitlesSrc": "https://media.vimejs.com/subs/english.vtt",
      "srclang": "en",
      "label": "English"
    }
  ]
}

ZdPlayer

Nome	Tipo	Padrão	Descrição
aspectRatio	string	16:9	A proporção do player expressa como largura:altura (16:9). Isso só é aplicado se o viewType for vídeo e o player não estiver no modo de tela cheia.
autopause	boolean	false	Se o player deve pausar automaticamente quando outro player do Vime iniciar/retomar a reprodução.
autoplay	boolean	false	Se a reprodução deve começar automaticamente quando a mídia estiver pronta para isso. Isso só funcionará se as políticas de reprodução automática dos navegadores forem atendidas.
controls	boolean	false	Indica se uma interface de usuário deve ser mostrada para controlar o recurso.
currentTime	number	0	Um duplo indicando o tempo de reprodução atual em segundos. O padrão é 0 se a mídia não começou a ser reproduzida e não procurou. Definir este valor busca a mídia para o novo tempo.
debug	boolean	false	Se o player está no modo de depuração e deve console.x informações sobre seu estado interno.
language	string	en	O idioma atual do player. Isso pode ser qualquer código definido por meio do método extendLanguage ou o padrão en.
loop	boolean	false	Se a mídia deve começar a ser reproduzida automaticamente desde o início toda vez que termina
muted	boolean	false	Se o áudio está silenciado ou não.
paused	boolean	true	Se a reprodução deve ser pausada. O padrão é true se nenhuma mídia foi carregada ou a reprodução não foi iniciada. Definir como true iniciará/retomará a reprodução.
playing	boolean	false	Se a mídia está sendo reproduzida ativamente. O padrão é false se nenhuma mídia foi carregada ou a reprodução não foi iniciada.
volume	number	50	Um int entre 0 (silencioso) e 100 (mais alto) indicando o volume do áudio.
controlsSettings	IControlsSettings	{}	Define uma interface com os controles do player

ZdDailymotion

O component "Dailymotion" deve ser utilizado como children do component "Player"

Nome	Tipo	Padrão	Descrição
color	string	undefined	Altere a cor de realce padrão usada nos controles (valor hexadecimal sem o # inicial)
poster	string	undefined	O URL absoluto de um pôster personalizado a ser usado para o vídeo atual.
shouldAutoplayQueue	boolean	false	Se o próximo vídeo da fila deve ser reproduzido automaticamente.
showDailymotionLogo	boolean	false	Se o logotipo do Dailymotion deve ser exibido.
showShareButtons	boolean	false	Se os botões para compartilhar o vídeo devem ser exibidos.
showUpNextQueue	boolean	false	Se a fila 'Próximo' deve ser exibida.
showVideoInfo	boolean	true	Se as informações do vídeo (título e proprietário) devem ser exibidas na tela inicial.
syndication	boolean	false	Encaminha sua chave de distribuição para o player.
videoId	string	``	O ID do recurso Dailymotion do vídeo a ser carregado.

ZdVideo

O component "Video" deve ser utilizado como children do component "Player"

Nome	Tipo	Padrão	Descrição
controlsList	string	undefined	Determina quais controles mostrar no elemento de mídia sempre que o navegador mostrar seu próprio conjunto de controles
crossOrigin	string	undefined	Se o CORS deve ser usado para buscar a imagem relacionada. Consulte MDN para obter mais informações.
mediaTitle	string	undefined	O título da mídia atual.
poster	string	undefined	Um URL para uma imagem a ser exibida durante o download do vídeo. Se este atributo não for especificado, nada será exibido até que o primeiro quadro esteja disponível, então o primeiro quadro será mostrado como o quadro de pôster.
preload	string	metadata	Fornece uma dica ao navegador sobre o que o autor acha que levará à melhor experiência do usuário em relação ao conteúdo carregado antes da reprodução do vídeo. Consulte MDN para obter mais informações.
dataSrc	string	undefined	Definir caminho ou URL do vídeo
type	string	undefined	Defina o tipo de vídeo
subtitlesSrc	string	undefined	Definir caminho ou url das legendas
srclang	string	undefined	Definir idioma das legendas
label	string	undefined	Definir rótulo da legenda

ZdVimeo

O component "Vimeo" deve ser utilizado como children do component "Player"

Nome	Tipo	Padrão	Descrição
byline	boolean	true	Se o nome do proprietário do vídeo deve ser exibido.
color	string	undefined	O valor de cor hexadecimal dos controles de reprodução. As configurações de incorporação do vídeo podem substituir esse valor.
cookies	boolean	true	Se os cookies devem ser ativados na incorporação.
noAutoAspectRatio	boolean	false	O URL absoluto de um pôster personalizado a ser usado para o vídeo atual.
poster	string	undefined	Se o retrato do proprietário do vídeo deve ser exibido.
portrait	boolean	false	Desativa a determinação automática da proporção do vídeo atual.
videoId	string	``	O ID do recurso do Vimeo do vídeo a ser carregado.

ZdYoutube

O component "Youtube" deve ser utilizado como children do component "Player"

Nome	Tipo	Padrão	Descrição
cookies	boolean	false	Se os cookies devem ser ativados na incorporação.
poster	string	undefined	O URL absoluto de um pôster personalizado a ser usado para o vídeo atual.
showFullscreenControl	boolean	true	Se o controle de tela cheia deve ser mostrado.
videoId	string	``	O ID do recurso do YouTube do vídeo a ser carregado.

IControlsSettings

Nome	Tipo	Padrão	Descrição
noCaptions	boolean	false	Define se o controle da legenda deve aparecer.
noClickToPlay	boolean	false	Define se botão click to play deve aparecer.
noControls	boolean	false	Define se os controle devem aparecer.
noDblClickFullscreen	boolean	false	Define se o duplo click deve mudar para full screan.
noLoadingScreen	boolean	false	Define se o loading deve aparecer.
noPoster	boolean	false	Define se o poster deve aparecer.
noSettings	boolean	false	Define se o controle da configurações deve aparecer.
noSpinner	boolean	false	Define se o laoder deve aparecer.