AMP

amp-video

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 atributo crossorigin à 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>
Abrir esse snippet no playground

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

Precisa de mais ajuda?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Ir para Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Ir para o GitHub