Anotações sobre Vimeo SDK

00_vimeo.md

01_anotacoes.md

The Player SDK Vimeo

Referencias:

📚 Player SDK: Reference

📚 Vimeo Player API

Enables para o iframe do vimeo

Opção	Deafult	Descrição	Tipo de dado
id	null	Identificador do video no vimeo*	Inteiro
controls	false	Adiciona/retira todos os elementos da capa do video como barra de controle, titulos, ações, etc**	Boolean
title	true	Mostra o titulo do video	Boolean
portrait	true	Mostra a logo da conta do autor do video	Boolean
byline	true	Mostra o nome do autor do video	Boolean
color	00adef (azul)	Seta a cor dos elementos da capa como barra de progresso, background do botão do play, etc	hexa sem #
loop	false	Executa o video de novo quando ele termina	Boolean
texttrack	false	Seta a legenda do video	String -> lista de siglas
autoplay	false	Inicia o play automaticamente ao carregar o video. Em casos de videos privados, após o usuário inserir a senha o player é executado	Boolean

_{*atributo obrigatório}

_{**disponível apenas em contas não gratuitas como pro, premium, etc/sub>}

Exemplo com os parametros descritos na tabela

https://player.vimeo.com/video/${id}?&texttrack='en-US'&loop=1&color=fff&portrait=1&byline=1&title=1&controls=1`

Funções da lib @player/vimeo

Considerações importantes:

1. Todas as funções retornam uma promisse.

2. Algumas configurações feitas no video pelo site do vimeo afetam o funcionamento das funções descritas aqui. Por exemplo, se a cor de background dos elementos da capa foi já foi personalizada, não será possivel ajustar para outras cores com a função setColor no código.

3. O player é o elemento html (frame) correspondente ao video. Podemos capturá-lo com o javascript da seguinte forma:

var iframe = document.querySelector('iframe');

Depois, iniciamos um novo video player com ele para usar as funções oferecidas pela biblioteca:

var player = new Vimeo.Player(iframe);

Captura a duração do video

player.getDuration().then(function(duration) {
  console.log('Duração do video em segundos:', duration)
})

Faz o video ser executado em loop

player.setLoop(true).then(function(loop) {
  console.log('O video está sendo executado em loop')
})

Verifica se o video está funcionando em loop

player.getLoop().then(function(loop) {
  console.log("Estamos em loop?", loop)
})

Verifica se o video terminou

player.getEnded().then(function(ended) {
  console.log("O video terminou?", ended)
})

Coloca o audio do video mutado.

obs: se usarmos a função setVolume em seguida, o video não ficará mais mutado

player.setMuted(false).then(function(muted) {
 console.log("O video está mutado?", muted)
})

Verifica se o video está mutado

player.getMuted().then(function(muted) {
 console.log('O video está mutado?', muted)
})

Coloca o video em um ponto/tempo especifico

A função recebe um valor numérico em segundos que deve ser maior que 0 e menor do que o intervalo de tempo de video, caso contrário cairá em catch.

obs: o tempo default é de 0s

player.setCurrentTime(0).then(function(seconds) {
 console.log("O video está no tempo de", seconds, "segundos")

}).catch(function(error) {
 switch (error.name) {
   case 'RangeError':
     console.log("O tempo é menor que 0 ou maior que a duração do video")
   break;

   default:
     // some other error occurred
   break;
 }
});

Captura em que tempo/ponto o video está

player.getCurrentTime().then(function(seconds) {
  console.log("O video está em: ", seconds, "segundos")
})

Captura o range de tempo onde o cursor do video esteve

A promisse retorna um conjunto de arrays onde cada um possui 2 valores (onde o cursor da barra de reprodução esteve e para onde foi)

player.getPlayed().then(function(played) {
  console.log(played) 
})

Captura o titulo do video

player.getVideoTitle().then(function(title) {
  console.log('Titulo:', title);
});

Captura a qualidade do video

player.getQuality().then(function(quality) {
  console.log('Qualidade do video: ', quality)
})

Ajusta o controle do video

A função recebe um valor inteiro com range de 0 à 1. Para ajustar o volume com cada uma das barras completas, segue a tabela:

Qtd. de barras	Valor
0	0
1	0.2
2	0.4
3	0.6
4	0.8
5	1

player.setVolume(0).then(function(volume) {
  console.log('Volume do video:', volume)
})

Executa o play no video

player.play();

Também podemos resolver a promisse e verificar se o play foi dado ou se ocorreu algum erro:

player.play(id-movie).then(function(id) {
  console.log('O video foi carregado com sucesso')

}).catch(function(error) {
    switch (error.name) {
      case 'TypeError':
        console.log('O id não é um número')
        break;

      case 'PasswordError':
        console.log('O video tem senha de proteção e precisa ser insirida primeiro')
        break;

      case 'PrivacyError':
        console.log('O video tem senha de proteção ou é privado')
        break;

      default:
        console.log('Algo deu errado')
        break;
    }
});

Executa o pause no video

player.pause();

Verifica se o video está em fullscreen (tela cheia)

player.getFullscreen().then(function(fullscreen) {
  console.log("O vídeo está em tela cheia?", fullscreen)
})

Verifica se o video está pausado

player.getAutopause().then(function(autopause) {
  console.log('O video está pausado?', autopause)
})

Ajusta a cor de background dos elementos da capa do video

A função pode receber um hexa correspondente a cor:

player.setColor('#fff').then(function(color) {
  console.log('Cor escolhida em hexa:', color)
})

Captura a legenda do video

player.getTextTracks().then(function(tracks) {
  console.log("Legenda do video:", tracks)
})

Ajusta a legenda do video

A função recebe como parametro uma sigla (string) referente ao idioma.

Informações sobre legendas e idiomas suportados

player.enableTextTrack('en-US').then(function(track) {
  console.log('Legenda do video:', track)
}).catch(function(error) {
    switch (error.name) {
      case 'InvalidTrackLanguageError':
        console.log('Parece que a legenda escolhida não está disponivel para esse video')
        break;

      case 'InvalidTrackError':
        console.log('Parece que a legenda escolhida não está disponivel para esse video e tipo')
        break;

      default:
        console.log('Alguma coisa deu errado')
        break;
    }
});

Loaded

O evento loaded é acionado ao carregar o video e ao inserir a senha privada para abri-lo

player.on('loaded', () => {
  console.log('Video inciado')
})

Acompanhamento do tempo atual do video

A cada 250ms

Para acessar o tempo em segundos que o video está, o percentual sua duração em "tempo real" é possivel usar o escuta do evento timeupdate, que atualizará esses parametros a cada 250ms e realiza a escuta somente enquanto o video está sendo executado.

player.on("timeupdate", (time) => {
  console.log('Atualização de tempo:', time)
});

Ao usar o cursor da barra de reprodução

Para capturar o tempo em segundos em que o video está ao clicar em algum ponto da barra de reprodução

player.on("seeked", (time) => {
  console.log('Tempo nesse ponto:', time)
});

02_html5.md

Lidando com video com HTML 5 e React

Aqui estamos construindo uma barra de controle para pausar, mutar, acelerar tempo e velocidade do video, adicionar e remover PIP (picture in picture) e mutado.

import { useRef, useState } from 'react'
import videoSrc from './video.mp4'

export default function Player() {
  const videoRef = useRef<HTMLVideoElement>(null)
  const [isPaused, setIsPaused] = useState(true)

  function onTooglePlay() {
    if (!videoRef.current) return

    if (isPaused) {
      return videoRef.current.play()
    }

    videoRef.current.pause()
  }

  function onToogleMute() {
    if (!videoRef.current) return

    videoRef.current.muted = !videoRef.current.muted
  }

  function changePlaybackRate({ speed }: { speed: number }) {
    if (!videoRef.current) return

    videoRef.current.playbackRate = speed
  }

  function increaseCurrentTime() {
    if (!videoRef.current) return

    videoRef.current.currentTime += 2
  }

  function onTooglePip() {
    if (!videoRef.current) return

    if (document.pictureInPictureElement) {
      return document.exitPictureInPicture()
    }

    /* Alert: Does not support to Mozila Firefox */
    return videoRef.current.requestPictureInPicture()
  }

  return (
    <div>
      <h1>Build control player bar to html5 video</h1>
      <video
        ref={videoRef}
        src={videoSrc}
        onPlay={() => setIsPaused(false)}
        onPause={() => setIsPaused(true)}
      />
      <br />
      <div style={{ display: 'flex', gap: '20px' }}>
        <button onClick={onTooglePlay}>{isPaused ? 'Play' : 'Pause'}</button>
        <button onClick={increaseCurrentTime}>+ 2s</button>
        <button onClick={() => changePlaybackRate({ speed: 1 })}>1x</button>
        <button onClick={() => changePlaybackRate({ speed: 2 })}>2x</button>
        <button onClick={onTooglePip}>PiP</button>
        <button onClick={onToogleMute}>M</button>
      </div>
    </div>
  )
}