@zeedhi/zd-video-vue NPM

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.

@vime/core @vime/vue

@infinitebrahmanuniverse/nolb-_zee @everything-registry/sub-chunk-1072 @zeedhi/zd-video @zalastax/nolb-_zee

6 months ago

1 year ago

1 year ago

2 years ago

2 years ago