amp-video
Description
Substitui a tag de vídeo HTML5.
Required Scripts
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Supported Layouts
Um substituto para a tag video
de HTML5; para ser usado apenas em incorporações diretas de arquivos de vídeo HTML5.
Script obrigatório | <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script> |
Exemplos | No site AMP By Example: |
Layouts compatíveis | fill, fixed, fixed-height, flex-item, nodisplay, responsive |
Comportamento
O componente amp-video
carrega o recurso de vídeo especificado pelo atributo src
de forma lenta, em um horário determinado pelo ambiente de tempo de execução. Você pode controlar um componente amp-video
da mesma forma que uma tag <video>
padrão de HTML5.
O componente amp-video
aceita até quatro tipos exclusivos de nós HTML como filhos:
- Tags
source
: assim como na tag<video>
de HTML, você pode adicionar tags<source>
filhas para especificar diversos arquivos de mídia de origem a serem abertos. - Tags
track
para ativar legendas no vídeo. Se a faixa estiver hospedada em uma origem diferente do documento, adicione o atributocrossorigin
à tag<amp-video>
. - Um marcador antes do início do vídeo.
- Um substituto caso o navegador não seja compatível com vídeo HTML5: um ou zero nós filhos imediatos podem ter o atributo
fallback
. Se presente, esse nó e os filhos dele formam o conteúdo exibido caso o vídeo HTML5 não seja compatível com o navegador do usuário.
Exemplo
This browser does not support the video element.
<amp-video controls
width="640"
height="360"
layout="responsive"
poster="/static/inline-examples/images/kitten-playing.png">
<source src="/static/inline-examples/videos/kitten-playing.webm"
type="video/webm" />
<source src="/static/inline-examples/videos/kitten-playing.mp4"
type="video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
Análise
O amp-video
é compatível com análises prontas. Consulte a seção análise de vídeos (link em inglês) para ver mais informações.
Atributos
src | Obrigatório se nenhum filho de <source> estiver presente. Precisa ser HTTPS. |
poster | A imagem do frame a ser exibida antes do início da reprodução do vídeo. Por padrão, o primeiro frame é exibido. Como alternativa, você pode apresentar uma sobreposição de reprodução com um clique. Para mais detalhes, consulte abaixo a seção Sobreposição de reprodução com um clique. |
autoplay | Se este atributo estiver presente e o navegador for compatível com a reprodução automática, o vídeo será iniciado automaticamente assim que ficar visível. Há algumas condições que o componente precisa atender para ser reproduzido, descritas na especificações de vídeo em AMP (link em inglês). |
controls | Este atributo é semelhante ao atributo controls no video HTML5. Se o atributo estiver presente, o navegador oferecerá controles para que o usuário utilize na reprodução do vídeo. |
controlsList | Igual ao atributo controlsList do elemento de vídeo HTML5. Compatível apenas com alguns navegadores. Consulte https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList (link em inglês) para ver mais detalhes. |
dock | Requer a extensão amp-video-docking . Se o atributo estiver presente e o vídeo for reproduzido manualmente, o vídeo será "minimizado" e fixado a um canto ou elemento quando o usuário rolar para fora da área visual do componente de vídeo. Para mais detalhes, consulte a documentação sobre a extensão de âncora (link em inglês). |
loop | Se presente, o vídeo voltará automaticamente ao início quando chegar ao fim. |
crossorigin | Obrigatório se um recurso track estiver hospedado em uma origem diferente do documento. |
disableremoteplayback | Determina se o elemento de mídia pode ter uma IU de reprodução remota, como Chromecast ou AirPlay. |
muted (obsoleto) | O atributo muted está obsoleto e não tem mais efeito. O atributo autoplay controla automaticamente o comportamento de desativar o som. |
noaudio | Anota o vídeo como não tendo áudio. Isso oculta o ícone do equalizador que é exibido quando o vídeo tem reprodução automática. |
rotate-to-fullscreen | Se o vídeo estiver visível, ele será exibido em tela cheia depois que o usuário girar o dispositivo para o modo paisagem. Para ver mais detalhes, consulte as especificações de vídeo em AMP (link em inglês). |
common attributes | Este elemento inclui atributos comuns estendidos a componentes de AMP. |
Atributos da API Media Session
O componente amp-video
implementa a API Media Session, que permite aos desenvolvedores especificar mais informações sobre o arquivo de vídeo. As outras informações do vídeo são exibidas na central de notificações do dispositivo do usuário (junto com os controles de reprodução/pausa).
artwork | Especifica um URL para uma imagem PNG/JPG/ICO que atua como a arte do vídeo. Se `artwork` não estiver presente, o assistente da API Media Session usará o campo` image` na definição de `schema.org`, `og:image` ou `favicon` do site. |
artist | Indica o autor do arquivo de vídeo, especificado como uma string. |
album | Indica o álbum/coleção de onde o vídeo foi retirado, especificado como uma string. |
title | Indica o nome/título do vídeo, especificado como uma string. Se não for fornecido, o assistente da API Media Session usará o atributo `aria-label` ou voltará para o título da página. |
Exemplo:
Este exemplo contém os atributos poster
e artwork
. O poster
atua como a imagem do marcador antes da reprodução do vídeo, enquanto o artwork
é a imagem exibida na notificação por meio da API Media Session.
<amp-video width="720" height="305" layout="responsive"
src="https://yourhost.com/videos/myvideo.mp4"
poster="https://yourhost.com/posters/poster.png"
artwork="https://yourhost.com/artworks/artwork.png"
title="Awesome video" artist="Awesome artist"
album="Amazing album">
</amp-video>
Sobreposição de reprodução com um clique
O fornecimento de uma sobreposição de reprodução com um clique é um recurso comum de UX para players de vídeo na Web. Por exemplo, você pode exibir um ícone de reprodução personalizado em que o usuário pode clicar, bem como incluir o título do vídeo, imagens de pôster de diferentes tamanhos etc. Como o componente amp-video
é compatível com a ação padrão de AMP play
, é possível implementar facilmente a reprodução com um clique.
Para um exemplo detalhado, acesse Sobreposição de reprodução com um clique para amp-video no site AMP By Example.
Validação
Consulte as regras do amp-video (link em inglês) na especificação do validador de AMP.
Você já leu este documento várias vezes, mas ainda ficou com dúvidas sem respostas? Talvez outras pessoas pensem da mesma forma. Procure entrar em contato com elas no Stack Overflow.
Ir para o Stack Overflow Encontrou um bug ou sente falta de um recurso?O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.
Ir para o GitHub