Reprodução de mídia, do início ao fim (HTML)

Artigo
12/12/2015

[ 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]

Aprenda a criar aplicativos de mídia com muitos recursos para o Windows 8.1 que reproduzem áudio e vídeo, conservam a vida útil da bateria e otimizam a renderização.

Abordaremos como criar um aplicativo da Windows Store em JavaScript carregado com recursos de mídia, do início ao fim. Existem muitas melhorias no Windows 8.1 que facilitam ainda mais isso, como a nova API msRequestFullscreen . Abordaremos:

Noções básicas de reprodução de mídia, como o uso de elementos HTML audio e video , permitindo os controles de transporte e o carregamento de arquivos de mídia do dispositivo ou da rede.
Recursos de reprodução de mídia, como prevenção adequada contra esmaecimento da tela, reprodução de áudio em segundo plano, interação com os controles de transporte da mídia do sistema, redimensionamento de vídeo, criação de controles personalizados de transporte e habilitação da renderização em janela inteira.
Noções básicas de aplicativo, como preservação do estado do aplicativo, criação da interface do usuário na barra do aplicativo e criação de submenus Configurações.

Se você for iniciante no desenvolvimento de aplicativos da Windows Store em JavaScript, dê uma olhada em Criar seu primeiro aplicativo da Windows Store em JavaScript para adiantar-se.

Cada etapa abaixo vincula para um tópico de instruções com exemplos e código, então pesquise ali se quiser mais informações.

O exemplo Reprodução de mídia, do início ao fim inclui tudo o que falamos aqui. Podemos nos referir muitas vezes a esse exemplo e apontá-lo para lugares em que são implementados recursos específicos.

Captura de tela do aplicativo de exemplo de reprodução de mídia

Criar um aplicativo de mídia

Crie seu exemplo

Se você quiser seguir estas etapas para adicionar recursos de mídia ao seu aplicativo, pode iniciar com o tópico Navegação simples, do início ao fim e o modelo Padrão de navegação simples associado. Como alternativa, você também pode criar um projeto em branco de aplicativo da Windows Store ou um projeto de navegação no Microsoft Visual Studio. Embora o exemplo complementar tenha uma estrutura de navegação simples, ele usa algumas funções auxiliares em navigation.js,, que não estão incluídas no modelo em branco. Por isso, talvez seja mais fácil começar com um dos modelos de navegação e remover o que não for preciso.

Ou pule diretamente para o exemplo complementar Reprodução de mídia, do início ao fim.

O exemplo complementar implementa todas as etapas aqui, mas para manter as coisas fluindo não falaremos sobre o código aqui. Cada etapa tem uma seção "Encontre no exemplo" para ajudá-lo a encontrar o código rapidamente.

A estrutura dos arquivos de origem do exemplo é simples, então você pode encontrar o código com facilidade, sem ter que fazer uma busca detalhada em várias camadas de arquivos de origem. Mesmo assim, você pode preferir separar e organizar o seu projeto de forma diferente.

Noções básicas de reprodução de mídia

	Guia de início rápido: reproduzindo vídeo em um aplicativo Configure os aspectos básicos para vídeos em seu aplicativo. Este tópico de instruções detalha como fazer isso, mas para obter os aspectos básicos de reprodução de áudio e vídeo, basta adicionar um elemento audio ou video ao seu HTML e definir a propriedade src para um arquivo de mídia. Para controlar a reprodução de mídia, use os controles de transporte internos adicionando o atributo controls ao elemento audio ou video. Habilite e desabilite os controles, definindo a propriedade controls como true ou false. Os controles de transporte fornecem elementos comuns de interface do usuário de mídia, como os controles de volume e o botão de reprodução. Veja aqui como ficam esses controles no exemplo. Encontre no exemplo: O elemento video é nomeado como mediaVideo e é definido em HTML no arquivo \pages\mediaPlayer\mediaPlayer.js.
	Formatos de áudio e vídeo aceitos Os aplicativos da Windows Store que usam JavaScript aceitam um grande número de formatos de áudio e vídeo. Clique no link para ver a lista completa.
	Como abrir arquivos de mídia locais usando o controle FileOpenPicker Agora que temos reprodução de mídia, vamos definir a fonte de mídia enquanto o aplicativo está sendo executado. O controle FileOpenPicker permite que o usuário selecione um arquivo no sistema de arquivos local ou no Microsoft OneDrive. Esta etapa mostra como configurar o FileOpenPicker e como definir a propriedade video.src para o arquivo retornado pelo FileOpenPicker. Use StorageApplicationPermissions.futureAccessList para armazenar permissões para arquivos abertos com o FileOpenPicker. Seu aplicativo pode então acessar os arquivos mais tarde, quando o aplicativo estiver sendo restaurado a partir de um estado de término, por exemplo. O FileOpenPicker tem a seguinte aparência. O FileOpenPicker não precisa de seu aplicativo para declarar funcionalidades para pastas de sistema, como Música, Vídeos e Documentos. Isso ocorre porque o usuário tem controle total sobre o FileOpenPicker e sobre quais arquivos estão abertos. Para fins de privacidade e segurança, seu aplicativo deve declarar o menor número de funcionalidades possível. Mas se você quiser que seu aplicativo tenha acesso às pastas Vídeos e Música sem a informação do usuário — para exibir todas as capas de álbum na pasta Música, por exemplo — você deve declarar as funcionalidades correspondentes. Para saber mais, veja Declarações de funcionalidades do aplicativo. Encontre no exemplo: Veja as funções `setMediaSourceFromFilePicker` e `setMediaSourceFromFile` no \pages\mediaPlayer\mediaPlayer.js e o botão da barra de aplicativo `browseButton` no \pages\mediaPlayer\mediaPlayer.html.
	Como abrir arquivos de mídia na rede O controle FileOpenPicker funciona bem para obter um arquivo no sistema local, mas não funciona para configurar a fonte de mídia em um arquivo na rede. Para fazer isso, basta definir o src para o caminho do arquivo de mídia na rede. Encontre no exemplo: Olhe as funções `setMediaSourceFromTextBox` e `setMediaSourceFromPath` no \pages\mediaPlayer\mediaPlayer.js. Olhe também o elemento `txtSourceInput` input no \pages\mediaPlayer\mediaPlayer.html, que é usado para inserir o caminho de mídia.

Recursos de reprodução de mídia

	Como manter a exibição ativa durante a reprodução de áudio e vídeo Normalmente, quando um aplicativo da Windows Store não detecta a entrada do usuário em um determinado período de tempo, a tela esmaece e depois é desligada. Na maioria dos aplicativos, isso é uma coisa boa porque conserva energia e a vida útil da bateria. Em muitos aplicativos de mídia, no entanto, não queremos que a tela se esmaeça, porque alguém provavelmente está assistindo a um vídeo. Use a classe System.Windows.Display.DisplayRequest para informar o sistema para sempre manter a tela ligada com seu aplicativo. Mas não deixe de cancelar essa solicitação quando seu aplicativo não precisar mais, como quando seu aplicativo está suspenso ou a mídia encerrou a reprodução ou está em pausa. Não cancelar essa solicitação desperdiça a vida útil da bateria. Se a renderização em janela inteira for ativada pelo botão de janela inteira nos controles de transporte internos ou pela função msRequestFullscreen, o sistema cuida automaticamente da desabilitação e reabilitação do esmaecimento da tela. Portanto, se seu aplicativo precisa desabilitar o esmaecimento da tela somente no modo de janela inteira, você não precisa gerenciar o DisplayRequest. Encontre no exemplo: Olhe a função `setScreenDimming` no \pages\mediaPlayer\mediaPlayer.js.
	Como usar os controles de transporte de mídia do sistema O Windows 8.1 introduz uma nova classe para interagir com os controles de transporte de mídia do sistema. De agora em diante, use SystemMediaTransportControls em vez da antiga classe MediaControl. Os controles de transporte de mídia do sistema são diferentes dos controles de transporte no objeto de mídia HTML. Esses são os controles que aparecem quando você pressiona teclas de mídia no hardware, como o controle de volume nos fones de ouvido ou os botões de mídia em alguns teclados. Seu aplicativo pode se registrar para usar esses controles e ainda pode transmitir metadados de mídia, como a capa do álbum ou os títulos das músicas, a serem exibidos por eles. A seguir está uma visualização dos controles. Encontre no exemplo: Olhe as funções `WinJS.UI.Pages.definesetupSystemMediaTransportControls` e `systemMediaControlsButtonPressed` no \pages\mediaPlayer\mediaPlayer.js. Assim como os manipuladores de eventos `mediaPlayingmediaPaused` e `mediaEnded` no \pages\mediaPlayer\mediaPlayer.js.
	Como reproduzir áudio em segundo plano. Agora vamos configurar o suporte de áudio em segundo plano, para que os usuários possam ouvir música com seu aplicativo enquanto interagem com um aplicativo diferente. Quando um aplicativo que reproduz áudio vai para o segundo plano, como quando o usuário alterna para um aplicativo diferente, o comportamento padrão é que o áudio seja interrompido. Mas um aplicativo de música pode optar por continuar a reproduzir áudio. Para reproduzir o áudio em segundo plano, você deve definir a tarefa de áudio em segundo plano na seção Declarações do manifesto do aplicativo. E você deve habilitar as propriedades isPlayEnabled e isPauseEnabled no SystemMediaTransportControls e manipular o evento buttonpressed. Isso é necessário para que o usuário tenha uma maneira de reproduzir e interromper o áudio quando o seu aplicativo não for o aplicativo ativo. Encontre no exemplo: Veja o elemento video no \pages\mediaPlayer\mediaPlayer.html, a função `setupSystemMediaTransportControls` no \pages\mediaPlayer\mediaPlayer.html, e olhe a seção Declarações package.appmanifest.xml para habilitar a tarefa em segundo plano.
	Como habilitar a renderização de janela inteira Os controles de transporte internos para os objetos audio e video têm um botão de janela inteira. No entanto, se você quiser habilitar ou desabilitar a renderização de janela inteira de forma programática, use a função msRequestFullscreen. Até o Windows 8.1, você mesmo tinha que calcular os limites da janela inteira e mostrar e ocultar a interface do usuário. Se isso não fosse feito da maneira certa, algumas otimizações de renderização não poderiam ser habilitadas. Portanto, use sempre a função msRequestFullscreen para habilitar e desabilitar a renderização de janela inteira. (E é mais fácil). Encontre no exemplo: Olhe a função `fullScreenMedia` no \pages\mediaPlayer\mediaPlayer.js.
	Como criar controles personalizados de transporte Se você precisar expandir a funcionalidade que os controles de transporte audio e video oferecem, ou se quiser substituí-los completamente, terá que criar controles de transporte personalizados. O exemplo Reprodução de mídia, do início ao fim implementa todos os controles de transporte personalizados no AppBar, mas deixa os controles de transporte internos habilitados. Se você estiver criando seus próprios controles de transporte personalizados, talvez prefira simplesmente substituir a interface do usuário interna pela sua. Para desabilitar os controles de transporte internos, defina controls como false Este tópico de instruções aborda a criação de controles de transporte personalizados para reproduzir, pausar, parar, avançar, retroceder, posicionar o controle deslizante, janela inteira, seção de áudio, mudo e volume. Encontre no exemplo: Veja os elementos AppBar no \pages\mediaPlayer\mediaPlayer.html, e veja \pages\mediaPlayer\mediaPlayer.js para os manipuladores de eventos que implementam os recursos.

Noções básicas sobre aplicativo

Adicionando barras de aplicativos

Posicione a interface do usuário que interage com o aplicativo e os objetos audio e video nas barras de aplicativo usando um WinJS.UI.AppBar. Os controles WinJS.UI.AppBarCommand foram criados especificamente para o AppBar funcionar bem. Os seguintes tipos de controle estão disponíveis: "botão", "alternância", "submenu", "separador" e "conteúdo".

A enumeração WinJS.UI.AppBarIcon contém um grande número de símbolos que você pode usar para o AppBarCommand.icon. Você também pode fornecer seu próprio personalizado arquivo PNG (Portable Network Graphics).

Veja aqui como o AppBar fica no exemplo complementar.

Mostra um AppBar com AppBarButtons

O exemplo complementar usa submenus para o controle de seleção de faixas de áudio e o controle de volume. Isso ajuda a economizar espaço.

Para obter informações sobre como usar o AppBar e projetar seu aplicativo, consulte Diretrizes para barras de aplicativos.

Encontre no exemplo: Olhe os elementos <div id="appBarTop" e <div id="appBarBottom" no \pages\mediaPlayer\mediaPlayer.html. Se você quer saber como é implementado um controle e um recurso particulares, procure nos manipuladores de eventos os botões da barra de aplicativo em \pages\mediaPlayer\mediaPlayer.js.

Gerenciar o ciclo de vida e o estado do aplicativo

Salvar o estado de seu aplicativo nos aplicativos da Windows Store é importante, porque seu aplicativo pode ser suspenso para o segundo plano a qualquer momento e finalizado pelo sistema. Quando o seu aplicativo recomeça, o usuário normalmente espera que a mídia esteja no mesmo lugar de antes e todas as configurações do aplicativo estejam inalteradas.

Você pode salvar o estado do aplicativo no armazenamento isolado do dispositivo ou no armazenamento móvel. O armazenamento móvel é útil porque permite que o usuário execute seu aplicativo em vários dispositivos e o estado é compartilhado entre todos eles.

Estados video importantes para serem salvos são src, currentTime, loop, paused, ended, autoplay e todos os audioTracks selecionados.

navigation.js são funções auxiliares que fazem parte dos modelos do Visual Studio. Eles estão incluídos em todos os modelos, menos no modelo em branco. Essas funções auxiliares simplificam a manipulação de suspender, retomar e retomar depois do encerramento.

Alguns estados de mídia devem ser restaurados depois que a mídia for carregada — por exemplo, currentTime.

Encontre no exemplo: Olhe as funções app.oncheckpoint, navigationHelper_SaveState, restoreMediaState, mediaLoaded e appResumingFromSuspend no \pages\mediaPlayer\mediaPlayer.js. No \js\default.js, olhe no app.onactivated.

Diretrizes para configurações de aplicativos

Use o controle WinJS.UI.SettingsFlyout para aplicativos da Windows Store em JavaScript.

As configurações são para opções de configuração que afetam o comportamento do aplicativo como um todo e que são ajustadas apenas ocasionalmente. O exemplo Reprodução de mídia, do início ao fim cria um submenu Configurações de vídeo e Configurações de áudio que pode ser usado para armazenar as configurações do aplicativo.

Encontre no exemplo: Olhe o app.onactivated no \js\default.js. As páginas de configuração audio.html, video.html, help.html e privacy.html estão na subpasta \settings.

Terminar

Usando o Kit de Certificação de Aplicativos Windows

Recomendado. Executar o Kit de Certificação de Aplicativos Windows ajuda a garantir que seu aplicativo cumpra os requisitos da Windows Store. Recomendamos que você execute-o sempre que adicionar a funcionalidade principal em seu aplicativo.

Pronto! Agora que você explorou diferentes recursos de reprodução de mídia para seu aplicativo, está pronto para criar um aplicativo como o do exemplo Reprodução de mídia, do início ao fim.

Quer saber mais?

Interface do usuário de aplicativo da Windows Store, do início ao fim

Saiba mais sobre projetar a interface do usuário de aplicativo da Windows Store.

Interação do usuário, do início ao fim

Saiba mais sobre como adicionar a entrada por toque a aplicativos da Windows Store.

Mapa para os aplicativos da Windows Store que usam JavaScript

Saiba mais sobre como criar aplicativos da Windows Store em JavaScript em geral.

Planejando a experiência do usuário com aplicativos

Saiba mais sobre a criação de grandes experiências de usuário.

Formatos de áudio e vídeo aceitos

Saiba mais sobre formatos de áudio e vídeo aceitos em aplicativos da Windows Store em JavaScript.

Desempenho de áudio e vídeo

Saiba mais sobre considerações de desempenho para aplicativos de mídia.

Guia de início rápido: adicionando controles e estilos WinJS

Saiba mais sobre controles e eventos em aplicativos da Windows Store em JavaScript.

Compartilhar via