Índice

amp-video

You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

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

fill fixed fixed-height flex-item intrinsic nodisplay responsive

Exemplos

amp-app-banner amp-video Advanced Video Docking Click-to-play overlay for amp-video Integrating Videos in AMP an Overview Rich Media Notifications Video Carousels with amp-carousel Video rotate to fullscreen with hint

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: Exemplo de amp-video Sobreposição de reprodução com um clique para amp-video
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 este trecho 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 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.

Precisa de mais ajuda?

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

amp-video 1.0 0.1