Guia de início rápido: reproduzindo vídeo em um aplicativo (HTML)

Artigo
02/16/2016

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Este tópico mostra como usar o elemento HTML5 Video para reproduzir vídeo em um aplicativo do Tempo de Execução do Windows em JavaScript.

Para obter outro exemplo que use áudio e vídeo no aplicativo do Tempo de Execução do Windows em JavaScript, veja Exemplo de reprodução de mídia HTML.

Para saber sobre formatos de mídia de áudio ou vídeo com suporte em aplicativos do Tempo de Execução do Windows, veja Formatos de áudio e de vídeo aceitos.

Pré-requisitos

Este tópico presume que você possa criar um aplicativo básico do Tempo de Execução do Windows em JavaScript. Para obter ajuda para criar seu primeiro aplicativo, veja Criar seu primeiro aplicativo da Windows Store em JavaScript.

Instruções

1. Declarar capacidade do cliente da Internet

Abra o arquivo de manifesto do aplicativo, appxmanifest.xml, e habilite Internet (Client) capability:

No Microsoft Visual Studio, abra o designer do manifesto do aplicativo clicando duas vezes no item package.appxmanifest do Gerenciador de Soluções.
Clique em Funcionalidades.
Marque a caixa para a funcionalidade Internet (Client) .

Essa funcionalidade proporciona o acesso de saída do aplicativo à Internet, que é necessário para reproduzir vídeo de uma URL da Internet.

Observação Essa funcionalidade não é necessária ao reproduzir arquivos de vídeo locais.

2. Adicionar o elemento de vídeo

Abra o arquivo HTML denominado Default.html e adicione o elemento de vídeo ao corpo do documento.

<body>
  <video id="mediaVideo" src="https://www.contoso.com/clip.mp4" controls/>
</body>

Você deve substituir uma URL real pela URL "https://www.contoso.com/clip.mp4" no exemplo.

O elemento Video fornece um conjunto de controles de reprodução integrados que permitem que o usuário inicie ou pause o vídeo, procure uma nova posição e ajuste o volume. Por padrão, os controles de reprodução ficam ocultos. Para habilitá-los, apenas adicione o atributo controls, conforme mostrado. Os controles são exibidos quando o usuário passa o mouse sobre o vídeo.

3. Definir os atributos de largura e altura

Se você souber antecipadamente as dimensões do vídeo, será recomendável definir os atributos width e height no elemento video. Esses atributos fornecem o tamanho do layout do elemento, em pixels de folhas de estilo em cascata (CSS). Quando a página está carregando, o espaço é reservado para o elemento. Se você sair dos atributos width e height, a página será percorrida novamente depois que o vídeo for baixado.

<body>
   <video src="https://www.contoso.com/clip.mp4" controls width=640 height=480/>
</body>

Os atributos width e height sempre especificam os CSS pixels e não têm uma unidade. Por exemplo, "5cm" e "100%" não são válidos.

Se os atributos width e height não corresponderem ao tamanho intrínseco do vídeo, o controle de vídeo alongará o vídeo, preservando a taxa de proporção por meio das letterboxes, se necessário. No entanto, é melhor evitar o alongamento do vídeo, pois isso pode criar artefatos visuais. Sempre que possível, codifique o vídeo no tamanho de visualização definido.