Reprodução de mídia
Idioma: HTML | XAML

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

[ 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 C++, C# ou Visual Basic carregado com recursos de mídia, do início ao fim. Existem muitas melhorias no Windows 8.1 que facilitam ainda mais isso, como os novos controles de transporte para a classe MediaElement. Abordaremos esses, mais:

  • Noções básicas de reprodução de mídia como a criação de um MediaElement, 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 C++, C# ou Visual Basic, dê uma olhada em Crie seu primeiro aplicativo da Windows Store em C# ou Visual Basic 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

ícone de início

Crie seu exemplo

Se você quiser seguir essas etapas para adicionar recursos de mídia em seu próprio aplicativo, pode criar um projeto de aplicativo da Windows Store em branco no Microsoft Visual Studio e adicionar um item Básico. O item Básico inclui automaticamente classes auxiliares úteis, como SuspensionManager.cs, que simplificam a tarefa de salvar o estado do aplicativo e manipular a suspensão e recuperação do aplicativo. Para adicionar um item Básico, no Visual Studio, selecione Projeto > Adicionar novo item > Item básico.

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

ícone de etapa

Noções básicas de reprodução de áudio e vídeo

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 MediaElement ou ao seu XAML e definir a propriedade Source para um arquivo de mídia.

As duas classes MediaElement reproduzem vídeo e áudio.

Para controlar a reprodução de mídia, o Windows 8.1 introduz novos controles de transporte internos. Habilite e desabilite os controles definindo a propriedade AreTransportControlsEnabled. 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.

Captura de tela do exemplo de aplicativo que mostra o MediaElement com controles de transporte

Encontre no exemplo: O elemento MediaElement é nomeado como media e é definido em HTML no arquivo MainPage.xaml.

ícone de etapa

Formatos de áudio e vídeo aceitos

Os aplicativos da Windows Store que usam C++, C# ou Visual Basic aceitam um grande número de formatos de áudio e vídeo. Clique no link para ver a lista completa.

ícone da etapa

Como abrir arquivos de mídia 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 MediaElement.Source 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.

Captura de tela do controlo FileOpenPicker

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 os métodos Browse_Click e SetMediaSourceFromFile no MainPage.xaml.cs e o appBarTextBoxFilePath TextBlock no MainPage.xaml.

ícone de etapa

Como reproduzir 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 isso, crie um objeto Uri para o caminho do arquivo de mídia e defina o MediaElement.Source para ele.

É uma boa prática capturar exceções ao redor do código que define a fonte de mídia.

Encontre no exemplo: Olhe os métodos AppBarTextBoxFilePath_KeyUp e SetMediaSourceFromPath no MainPage.xaml.cs. Olhe também o appBarTextBoxFilePath TextBlock no XAML no MainPage.xaml, que é usado para inserir o caminho de mídia.

 

Recursos de reprodução de mídia

ícone de etapa 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 novos MediaElement ou pela função IsFullWindow, 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 os métodos DisableScreenDimming e UpdateMediaState no MainPage.xaml.cs.

ícone de etapa

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 MediaElement. Esses são os controles que aparecem quando 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, são pressionadas. 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.

Captura de tela dos controles de transporte de mídia do sistema

Encontre no exemplo: Veja o construtor MainPage e os métodos systemControls_ButtonPressed e UpdateMediaState no MainPage.xaml.cs.

ícone de etapa

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 Declarations 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 construtor MainPage e os métodos EnableBackGroundAudio e systemControls_ButtonPressed no MainPage.xaml.cs. Por fim, olhe também a seção Declarations do Package.appmanifest.xml para habilitar a tarefa em segundo plano.

ícone de etapa

Como redimensionar e ampliar vídeo

A propriedade MediaElement.Stretch define como o MediaElement preenche o espaço do contêiner no qual está. Os estados de Stretch são parecidos com as configurações de tamanho de imagem em aparelhos de televisão. Você pode ligar essa propriedade a um botão de interface do usuário e permitir que os usuários escolham as configurações de sua preferência.

  • None mostra a resolução nativa do conteúdo em seu tamanho original.
  • Uniform preenche o máximo do espaço, mantendo a taxa de proporção e o conteúdo da imagem. Isso pode produzir barras pretas horizontais ou verticais nas bordas do vídeo. Isso é semelhante aos modos widescreen.
  • UniformToFill preenche todo o espaço, mantendo a taxa de proporção. Isso pode fazer parte da imagem ser cortada. Isso é semelhante aos modos de tela inteira.
  • Fill preenche todo o espaço, mas não mantém a taxa de proporção. A imagem não é cortada, mas pode ocorrer um alongamento. Isso é semelhante aos modos de ampliação.

Aqui estão alguns exemplos de como esses valores de ampliação afetam a renderização de vídeo.

Exemplo de como os diversos valores de ampliação são renderizados

Encontre no exemplo: Olhe o método PictureSize_Click no MainPage.xaml.cs.

ícone de etapa

Como habilitar a renderização de janela inteira

Os controles de transporte internos para a classe MediaElement 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 nova propriedade IsFullWindow.

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 propriedade IsFullWindow para habilitar e desabilitar a renderização de janela inteira. E é mais fácil.

Encontre no exemplo: Olhe o método ToggleFullWindow no MainPage.xaml.cs.

ícone de etapa

Como criar controles personalizados de transporte

Se você precisar expandir a funcionalidade que os controles de transporte MediaElement 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 MediaElement 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 AreTransportControlsEnabled 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 o elemento <Page.BottomAppBar> no MainPage.xaml e veja MainPage.xaml.cs para os manipuladores de eventos que implementam os recursos. O controle personalizado para implementar o controle deslizante de posição da linha do tempo é a maior parte do código e está todo no final do MainPage.xaml.cs.

 

Noções básicas sobre aplicativo

ícone de etapa

Adicionando barras de aplicativos

Posicione a interface do usuário que interage com o aplicativo e o MediaElement no AppBar. Os controles AppBarButton e AppBarToggleButton foram criados especificamente para o AppBar funcionar bem.

A classe Symbol contém um grande número de símbolos que você pode usar para o AppBarButton.Icon. Você também pode fornecer seu próprio ícone ou usar um da lista de ícones da Segoe UI Symbol. Todos os botões do exemplo complementar usam ícones do Symbol.

Veja aqui como o AppBar se parece no exemplo complementar.

Mostra um AppBar com AppBarButtons

O exemplo complementar agrupa algum recurso relacionado em um Flyout, como os botões de imagem e áudio. 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: Veja MainPage.xaml e o <Page.TopAppBar> e <Page.BottomAppBar>. 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 MainPage.xaml.cs.

ícone de etapa

Animando sua interface do usuário

Uma animação pode adicionar um pouco de energia ao seu aplicativo. Até mesmo animações sutis vão fazer seu aplicativo se destacar. Animações básicas são simples de criar, e o sistema fornece uma série de animações de transição internas.

O exemplo Reprodução de mídia, do início ao fim cria uma animação de fade simples em mensagens de texto. Ele usa um Storyboard e DoubleAnimation na propriedade Opacity do TextBlock. Isso faz o texto desaparecer após alguns segundos.

Animações de transição como EntranceThemeTransition podem dar pistas visuais de que o estado do seu aplicativo foi alterado. O aplicativo complementar usa um EntranceThemeTransition em alguns dos objetos AppBarButton para dar a eles um pouco de movimento quando a barra do aplicativo é aberta.

Observação de desempenho: não anime o objeto MediaElement real. Isso pode ter um impacto negativo no desempenho.

Encontre no exemplo: Veja o <Page.Resources> no MainPage.xaml e o método DisplayMessage no MainPage.xaml.cs.

ícone de etapa

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 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 será compartilhado entre todos eles.

Estados MediaElement importantes para serem salvos são Source, Position, Stretch, IsLooping, CurrentState, AutoPlay e AudioStreamIndex.

SuspensionManager.cs e NavigationHelper.cs são classes auxiliares que fazem parte dos modelos do Visual Studio. Eles estão incluídos em todos os modelos, menos no modelo em branco. Se você criar um modelo em branco, o Visual Studio adicionará automaticamente esses arquivos se você adicionar um novo item Básico ao seu projeto. Essas classes auxiliares simplificam a manipulação de suspender, retomar e retomar depois do encerramento. Veja os métodos LoadState e SaveState no NavigationHelper.cs.

Algum estado MediaElement deve ser restaurado no MediaOpen manipulador de eventos, como MediaElement.Position. Isso acontece porque a mídia deve ser carregada antes que essas propriedades possam ser definidas. Por exemplo, NaturalDuration é definido depois que a mídia é carregada, e a propriedade Position não pode ser maior que NaturalDuration; portanto, você deve definir o Position depois que o NaturalDuration for definido.

Encontre no exemplo: Olhe os métodos navigationHelper_LoadState, navigationHelper_SaveState, Media_MediaOpened e RestoreMediaSourceState no MainPage.xaml.cs. No App.xaml.cs, olhe no construtor App, OnLaunched e OnSuspending para código de suspensão e configuração do SuspensionManager.

ícone de etapa

Diretrizes para configurações de aplicativos

O Windows 8.1 introduz um controle SettingsFlyout para aplicativos da Windows Store em C++, C# ou Visual Basic. O SettingsFlyout simplifica a criação de páginas de configuração.

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 os métodos OnLaunched e OnCommandsRequested no App.xaml.cs para configuração. E cada submenu Configurações tem um método Show correspondente no App.xaml.cs, como ShowAudioSettingsFlyout. Os submenus AudioSettings.xaml, VideoSettings.xaml, HelpSettings.xaml e PrivacySettings.xaml estão na subpasta Settings.

 

Terminar

ícone de requisitos da loja

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.

ícone de parada

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 (XAML)

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

Interação do usuário, do início ao fim (XAML) e Personalização da interação do usuário, do início ao fim (XAML)

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

Mapa de aplicativos do Tempo de Execução do Windows em C# e Visual Basic e Mapa de aplicativos do Tempo de Execução do Windows em C++

Saiba mais sobre a criação de aplicativos 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 como incorporar formatos de áudio e vídeo aceitos aos aplicativos da Windows Store em C++, C# ou Visual Basic.

Otimizar recursos de mídia

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

Guia de início rápido: adicionando controles e manipulando eventos

Saiba mais sobre controles e eventos nos aplicativos da Windows Store em C++, C# ou Visual Basic.

Amostras relacionadas

 

 

Mostrar:
© 2018 Microsoft