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. |