-
Atributos, propriedades, métodos e eventos do elemento de vídeo HTML
- 26 de agosto de 2024
O elemento video é um dos recursos mais notáveis do HTML5, pois permite aos desenvolvedores incorporar vídeos diretamente em páginas da web sem a necessidade de plug-ins externos como Flash. Através de vários atributos, propriedades, métodos e eventos , o elemento video oferece controle total sobre a reprodução de conteúdo multimídia. Neste artigo, exploraremos cada um desses recursos em detalhes.
Atributos do elemento video
Atributos do Elemento video Eles definem seu comportamento e aparência diretamente no HTML. Todos os atributos mais relevantes estão listados abaixo:
- src: especifica o URL do arquivo video que deve ser reproduzido. Este atributo é opcional se elementos forem usados 'source' dentro do 'video' .
- controls: mostra os controles padrão do navegador para reprodução, como botão de reprodução, barra de progresso, controle de volume, etc.
- autoplay: Indica que o video Ele deve começar a tocar automaticamente o mais rápido possível, assim que estiver carregado o suficiente.
- loop: Faz o video toca em um loop contínuo, recomeçando quando termina.
- muted: Faz o video toca sem som.
- poster : Define uma imagem que será exibida enquanto o video ou até que o usuário inicie a reprodução.
- preload: Sugere ao navegador como ele deve lidar com o carregamento do video. Você pode pegar os valores:
auto (pré-carregar todos os video), metadata (basta pré-carregar os metadados) ounone(não pré-carregue nada).
- width e height : Especifica as dimensões da área de exibição do video em pixels.
- playsinline: Indica que o video deve ser jogado online em vez de no modo de tela inteira em dispositivos móveis.
Propriedades do Elemento video
Propriedades do elemento video permitem que você manipule o comportamento de video através de JavaScript. As propriedades mais importantes são descritas abaixo:
- currentTime: Obtenha ou defina a posição de reprodução atual do video , em segundos. Útil para saltar para um ponto específico no video .
- duration: Retorna a duração total do video em segundos. Se a duração não estiver disponível, retorna NaN .
- paused: Indica se o video está atualmente em pausa.
- ended: Indica se a reprodução do video acabou.
- volume: Permite obter ou definir o nível de volume do video. O valor varia entre 0,0 (silêncio) e 1,0 (volume máximo).
- muted: Determina se o video está silenciado. Pode ser definido como verdadeiro ou falso.
- playbackRate: Controla a velocidade de reprodução do video. Um valor de 1,0 representa a velocidade normal, enquanto valores mais baixos a reduzem e valores mais altos a aumentam.
- readyState: Retorna o status de carregamento do video. Os valores possíveis são:
0 (HAVE_NOTHING), 1 (HAVE_METADATA), 2 (HAVE_CURRENT_DATA),
3 (HAVE_FUTURE_DATA)e 4 (HAVE_ENOUGH_DATA).
- seeking: Indica se o videoestá em processo de busca por um novo local de reprodução.
- buffered: Retorna um objeto TimeRanges que indica as partes do video que foram armazenados em buffer.
- videoWidth e videoHeight: Retorna a largura e a altura do video , respectivamente, em pixels.
Métodos de elemento video
Métodos de elemento video permitir que os desenvolvedores controlem a reprodução do video programaticamente. Os métodos mais utilizados são descritos aqui:
- play() : Inicia a reprodução do video. Se ele video está pausado, este método retoma a reprodução.
- pause(): Pausa a reprodução do video. Se ele videoJá está pausado, não tem efeito.
- load(): Recarregue o video desde a sua origem. Isto é útil se você precisar recarregar um video por algum motivo.
- canPlayType(type): Retorna um valor que indica se o navegador pode reproduzir um tipo específico de arquivo. video. Os valores possíveis são:
"" (desconhecido), "probably" (provavelmente reproduzível) e "maybe" (talvez reproduzível).
- addTextTrack(kind, label, language): Adiciona uma nova faixa de texto (por exemplo, legendas) ao video. O parâmetro kind poderia ser "subtitles", "captions", "descriptions", "chapters" qualquer "metadata".
Eventos de elemento video
Eventos de elemento video Eles são essenciais para responder às interações do usuário e às mudanças de estado durante a reprodução. Abaixo estão os eventos mais comuns:
- play: Dispara quando o video começa a jogar, seja por uma ação do usuário ou pelo método play() .
- pause: Acionado quando a reprodução do video para. Isso pode acontecer quando o usuário pausa o video ou quando o método é chamado pause().
- ended: Ocorre quando o video chega ao fim de sua duração e para de jogar.
- timeupdate: Aciona periodicamente enquanto a música está tocando. video e a posição de reprodução atual muda.
- volumechange: Ocorre quando o volume do video ou mudo está ativado/desativado.
- loadeddata: É acionado quando a bateria está carregada o suficiente. video para que esteja pronto para iniciar a reprodução, mas antes de estar totalmente carregado.
- loadedmetadata: Ocorre quando os metadados do video (por exemplo, duração, dimensões e faixas de texto).
- canplay : Indica que o video pode começar a reproduzir, mas ainda não está carregado o suficiente para reproduzir completamente sem pausas.
- canplaythrough: acionado quando o navegador estima que o video Pode ser jogado na íntegra sem interrupções.
- seeking: ocorre quando uma operação de busca é iniciada, ou seja, quando o usuário ou script altera a posição de reprodução.
- seeked: disparado quando uma operação de pesquisa é concluída.
O elemento video oferece grande flexibilidade e controle para reprodução de video na web. Ao compreender e usar seus atributos, propriedades, métodos e eventos, você pode criar experiências multimídia ricas adaptadas às necessidades de seus usuários. Explore todas as possibilidades que ela oferece e aproveite ao máximo esta poderosa ferramenta!
Comentar: