Possibilitando ótimas experiências de Reproduzir em dos seus aplicativos do Windows 8 (e sites!)

Blog do desenvolvedor de aplicativos do Windows 8

Ideias sobre a criação de aplicativos com o estilo Metro para o Windows 8, da equipe de engenharia do Windows 8

Possibilitando ótimas experiências de Reproduzir em dos seus aplicativos do Windows 8 (e sites!)

  • Comments 0

Visão geral do recurso Reproduzir em

O recurso Reproduzir em permite que você transmita música, fotos e vídeos de aplicativos para o Xbox e outros dispositivos compatíveis na sua rede doméstica. Imagine poder transferir fotos e vídeos facilmente do seu aplicativo para a TV de tela grande. Ou música do seu aplicativo para os altos-falantes da sua sala. Usando o contrato do botão Reproduzir em, você pode habilitar facilmente esses cenários para usuários de seus aplicativos. É uma ótima maneira de fazer com que seus aplicativos sejam mais atraentes nas salas dos usuários.

Para fornecer uma ótima experiência para o usuário final, desenvolvedor e dispositivo, criamos o Reproduzir em com algumas ideias em mente:

  • Usuários: Em redes onde os usuários habilitam o Compartilhamento (como redes domésticas), o Windows 8 descobre e instala automaticamente os dispositivos Reproduzir em certificados do Windows. O sistema operacional fornece uma experiência do usuário consistente em que ele pode passar o dedo e tocar em dispositivos no botão Dispositivo para iniciar o Reproduzir em de qualquer aplicativo compatível. Todas as mídias focadas em aplicativos da Microsoft têm a experiência Reproduzir em integrada, incluindo os aplicativos Música, Vídeo e Fotos. Até mesmo o Internet Explorer 10 implementa o contrato do botão Reproduzir em para que os usuários possam transmitir fotos e música e vídeos HTML5 de páginas da web.
  • Desenvolvedores: O contrato Reproduzir em do desenvolvedor é uma abstração de alto nível das tecnologias de transmissão de mídia subjacentes (protocolos, compatibilidade de formato, transcodificação etc.) e facilita a implementação (e teste) rápida em uma ampla variedade de aplicativos as experiências de Reproduzir em. Todos os aplicativos (e páginas da web HTML5 no IE) obtêm uma experiência básica habilitada por padrão e, portanto, podem personalizar ou desistir da experiência.
  • Dispositivos: A experiência Reproduzir em no Windows 8 foi desenvolvida para funcionar com dispositivos Reproduzir em certificados pelo Windows. Os dispositivos certificados fornecem uma experiência consistente e confiável. Existem diversas empresas de equipamentos eletrônicos correndo atrás da certificação de Reproduzir em para seus dispositivos, em várias categorias. Isso inclui TVs, decodificador de sinais, alto-falantes e receptores de áudio. Como divulgado na Electronics Entertainment Expo (E3) no início deste ano, o suporte ao receptor de Reproduzir em é um novo recurso que foi distribuído para cerca de 70 milhões de consoles do Xbox 360 como parte da atualização de dashboard do segundo semestre deste ano. Fique ligado no blog do Windows para não perder os comunicados de dispositivos!

Criação de experiências atraentes e interativas

O recurso Reproduzir em facilita o fornecimento de experiências atraentes em várias telas que serão de interesse do usuário e colocarão seu aplicativo em posição de destaque na Windows Store. Quando você implementa o Reproduzir em, obtém:

  • Experiências sociais em que os usuários podem compartilhar facilmente suas fotos e vídeos favoritos com amigos e familiares na maior tela da casa, diretamente do seu aplicativo.
  • Experiências complementares em que o aplicativo pode fornecer uma experiência de segunda tela – essas experiências podem variar de uma experiência simples de controle remoto a um sistema de classificação em que os usuários classificam faixas e consumem metadados sofisticados de álbuns e artistas.

Nesta postagem, usamos os aplicativos Amostra do Desenvolvedor e Fotos como exemplo de como criar e testar uma ótima experiência de Reproduzir em.

Como o Reproduzir em funciona no Windows 8?

Primeiro vamos observar a experiência completa de como o Reproduzir em funciona da perspectiva do usuário – desde a participação em uma nova rede até a transmissão de mídia para um dispositivo.

No Windows 8, fornecemos uma configuração simples de Reproduzir em, sem comprometer a privacidade e a segurança do usuário em redes públicas. O compartilhamento fica automaticamente habilitado em PCs com o Grupo Doméstico configurado e PCs em que o usuário seleciona as Configurações Expressas como parte da experiência de configuração na primeira execução. Além disso, sempre que um usuário entrar em uma nova rede, receberá imediatamente uma mensagem perguntando se deseja habilitar o compartilhamento e se conectar a dispositivos. Os usuários também podem exibir essa mensagem pressionando e segurando o nome da rede no menu suspenso Interface do Usuário da Conexão de Rede.

start_screen_sharing

Depois que a opção de compartilhamento estiver habilitada, o Windows encontrará e instalará automaticamente os dispositivos Reproduzir em compatíveis na rede em até 30 segundos. Os usuários podem saber se os dispositivos estão disponíveis na página Dispositivos nas configurações do PC. Os usuários também podem adicionar manualmente novos dispositivos na página Dispositivos nas configurações do PC.

pcsettings_screen

Depois que os dispositivos Reproduzir em forem instalados, o Windows se lembrará deles e rastreará automaticamente sua disponibilidade na rede. Agora, sempre que o usuário estiver usando um aplicativo com possibilidade de usar Reproduzir em, os dispositivos estarão disponíveis no botão Dispositivos.

Vamos discutir isso em mais detalhes na Amostra do Desenvolvedor executada no Visual Studio. Na amostra, o recurso Reproduzir em está habilitado para o vídeo Big Buck Bunny.

big_buck

 

Conforme esse aplicativo implementa o contrato do botão Reproduzir em nesta exibição, podemos passar o dedo e ver os dispositivos disponíveis no botão Dispositivos.

big_buck2

A seleção de um dispositivo inicia o Reproduzir em. Nesse caso, selecionamos o Xbox 360, e como você pode ver, o Controle de Vídeo entra em um modo em que o vídeo é substituído por uma sobreposição cinza. Os botões pausar, reproduzir, buscar e volume agora controlam a reprodução no dispositivo de destino.

playto_stream

O usuário pode encerrar a sessão selecionando Desconectar no botão Dispositivos.

playto_stream2

O que é o contrato do botão Reproduzir em?

É fácil implementar o recurso Reproduzir em no seu aplicativo. Veja como (para qualquer visualização no aplicativo):

  1. Crie um objeto PlayToManager para a visualização atual.
  2. Registre o evento SourceRequested para receber uma notificação quando o botão Dispositivos for selecionado.
  3. Configure o PlayToSource para especificar o elemento de mídia a ser transmitido dessa visualização. Se a fonte for um elemento de áudio, vídeo ou imagem, o botão Dispositivos mostrará apenas os dispositivos que podem consumir esse tipo de mídia. Se o usuário selecionar um dispositivo, o PlayToSource será enviado para o dispositivo. O PlayToSource pode ser atualizado para transmitir o próximo elemento depois que o elemento de mídia tiver concluído a reprodução no dispositivo.

Vejamos um exemplo simples de como habilitar o Reproduzir em para um único item de mídia.

JavaScript

<video id="videoplayer" src="http://www.contoso.com/clip.mp4" controls autoplay />
<script type="text/javascript">
// Step 1: Obtain PlayToManager object for app’s current view.
var ptm = Windows.Media.PlayTo.PlayToManager.getForCurrentView();
// Step 2: Register for the sourcerequested event (user selects Devices button).
ptm.addEventListener("sourcerequested", function(e) {
var request = e.sourceRequest;
// Step 3: Specify the media to be streamed (to filter devices)
request.setSource(document.getElementById("videoplayer").msPlayToSource);
// The media will then be streamed to the device chosen by the user in the UI.
});
</script>

XAML

<MediaElement x:Name="videoplayer" Source="http://www.contoso.com/clip.mp4" 
AutoPlay="true" />
// Step 1: Obtain PlayToManager object for app’s current view.
PlayToManager ptm = Windows.Media.PlayTo.PlayToManager.GetForCurrentView();
// Step 2: Register for the SourceRequested event (user selects Devices button).
ptm.SourceRequested += (PlayToManager sender, PlayToSourceRequestedEventArgs e) => {
request = e.SourceRequest;
// Step 3: Specify the media to be streamed.
PlayToSourceDeferral deferral = request.GetDeferral();
request.SetSource(videoplayer.PlayToSource);
deferral.Complete();
}
// The media will then be streamed to the device chosen by the user in the UI.

Quando você deve implementar o contrato do botão Reproduzir em?

Se o aplicativo incluir fotos, músicas ou vídeos interessantes que possam ser melhor aproveitados em uma tela grande ou estéreo de alta qualidade, faz sentido ter o Reproduzir em. Já vimos desenvolvedores criar ótimas experiências em uma variedade de aplicativos, entre eles Estilo de vida, Newsreader, Podcast e Mídia.

O recurso Reproduzir em é habilitado automaticamente para reproduzir elementos de música e vídeo em aplicativos do Windows 8 (mas não para visualizar elementos de imagem). Essa experiência padrão funciona bem para elementos de mídia individuais; no entanto, a personalização de Reproduzir em possibilita cenários mais complexos, como apresentações de slides e listas de reprodução.

A transmissão para dispositivos com Reproduzir em é compatível com todas as músicas, vídeos e imagens que não são protegidas por DRM – mídias de transmissão de coleções do usuário e baseadas na web. O conteúdo DRM não é compatível porque já foi fornecido para dispositivos como Smart TVs diretamente da web.

Nesta postagem, usamos o aplicativo Fotos como exemplo de uma ótima experiência de Reproduzir em. O aplicativo Fotos foi criado para oferecer uma ótima experiência de memórias digitais aos usuários - para que eles vejam, revivam, aproveitem, compartilhem e mergulhem em suas memórias. Ver suas memórias digitais na telona em casa aprimora toda a experiência e faz com que ela se torne muito mais interativa.

A amostra do aplicativo Fotos

O aplicativo Fotos criou uma visualização Reproduzir em que faz com que os usuários assumam o controle da apresentação de slides. E permite que os usuários vejam todo o conjunto de mídia em uma visualização de película fotográfica. Daqui, os usuários podem reproduzir e pausar vídeos, iniciar uma apresentação de slides ou enviar itens para a TV manualmente. Como as fotos e os vídeos são reproduzidos na TV, o aplicativo aproveita o espaço extra na tela no dispositivo do Windows 8 para mostrar mais, como os próximos itens para complementar a experiência de TV.

É importante integrar o Reproduzir em ao fluxo dos seus aplicativos. Para o aplicativo Fotos, uma visualização de Reproduzir em foi criada juntamente com o principal layout do aplicativo.

Os usuários podem clicar no botão Dispositivos e visualizar os dispositivos compatíveis de qualquer local no aplicativo. Sempre que um usuário estiver visualizando uma foto, vídeo ou coleção, ele terá a opção de clicar no botão Dispositivos e visualizar as opções do dispositivos. Os usuários podem enviar um álbum completo para outro dispositivo enquanto navegam ou até mesmo enviar uma cesta de fotos selecionadas de vários álbuns.

Neste exemplo, o usuário tinha fotos e vídeos específicos selecionados, então esses que serão enviados para a TV. Quando o usuário clica no botão Dispositivos, ele vê os dispositivos disponíveis que podem executar o tipo de conteúdo selecionado. O aplicativo só precisa especificar a fonte de conteúdo.

skate_park

Depois que o usuário selecionar um dispositivo, ele pode querer ter certeza de qual dispositivo está reproduzindo o conteúdo. O aplicativo Fotos cria um bom cabeçalho que mostra o local de transmissão do conteúdo em foco. O item de mídia executado no momento fica destacado com um retângulo em volta da foto ou do vídeo.

Veja a aparência do aplicativo quando ele está sendo reproduzido na TV:

skate_park2

Como fazer uma apresentação de slides ainda melhor

Os dispositivos Reproduzir em certificados pelo Windows oferecem suporte ao pré-buffer do próximo item em um cenário de lista de reprodução. Deixar que o dispositivo faça o pré-buffer do próximo item em uma lista de reprodução é uma ótima maneira de garantir um ótimo desempenho – o que é essencial para uma ótima experiência do usuário. Os aplicativos podem aproveitar essa funcionalidade especificando a fonte de Reproduzir em do “próximo” elemento em um cenário de lista de reprodução. Esse Início rápido do MSDN apresenta uma visão geral detalhada de como os aplicativos podem aproveitar essa funcionalidade avançada.

Como manter a reprodução da apresentação de slides

Uma sessão Reproduzir em continua sendo reproduzida até que o usuário a desconecte. Isso possibilita dois tipos de cenários de várias tarefas:

  1. Os usuários podem navegar até álbuns de fotos diferentes no mesmo aplicativo. A habilitação deste cenário exige que o aplicativo crie uma experiência em que Reproduzir em continue funcionando quando o usuário sair da apresentação de slides “Em execução”. Por exemplo, no aplicativo Fotos, os usuários podem selecionar algumas fotos e compartilhá-las por email enquanto a apresentação de slides é reproduzida na TV, ou você pode pesquisar pelo próximo conjunto de fotos que eles desejam mostrar sem interromper a apresentação de slides.
  2. Os usuários podem navegar para um aplicativo diferente para verificar emails, por exemplo, enquanto uma apresentação de slides estiver sendo exibida na TV. Nesse caso, o aplicativo não precisa fazer nada. O Windows mantém o aplicativo funcionando automaticamente em segundo plano enquanto uma sessão Reproduzir em está ativa. Os aplicativos têm aproximadamente 10 segundos para enviar uma nova imagem depois que a imagem atual tiver sido exibida e mais 10 segundos para enviar o próximo áudio ou vídeo depois que o atual for concluído para manter a sessão ativa. Quando a apresentação de slides, música/vídeo/listas de reprodução forem concluídas, o Windows suspenderá o aplicativo.

O que fazer e o que não fazer com o recurso Reproduzir em

Mantenha essa lista em mente ao criar uma experiência de qualidade do Reproduzir em.

O que você deve fazer:

  • Dizer ao usuário que seu aplicativo está sendo reproduzido em outro dispositivo.
  • Confiar no botão Dispositivos para conexão (e desconexão) dos usuários aos dispositivos.
  • Manter a sessão Reproduzir em ativa quando o usuário navega para diferentes visualizações no aplicativo.
  • Sempre especifique o próximo PlayToSource para aumentar o desempenho em uma lista de reprodução de músicas, fotos ou vídeos.
  • Consulte esta página de referência do MSDN para obter orientações detalhadas sobre como usar melhor o recurso Reproduzir em.

O que você não deve fazer

  • Adicionar botões personalizados para iniciar ou encerrar o recurso Reproduzir em de dentro do aplicativo – confie no botão Dispositivos.

E os sites?

Assim como na experiência do aplicativo, o Reproduzir em é habilitado automaticamente para músicas, vídeos e imagens no novo aplicativo do IE10. O IE tenta identificar o melhor item de mídia a ser usado como fonte do Reproduzir em, no entanto, ele prefere elementos executados no momento, selecionados, em foco e em visualização ativa.

Os elementos de música e vídeo com 5 segundos ou menos e as imagens com 300x300 pixels ou menos são ignoradas pelo IE e nunca são habilitadas automaticamente.

Confira esta página do MSDN para obter algumas orientações e dicas sobre como tornar as páginas da web amigáveis de Reproduzir em.

Algumas observações sobre formatos de mídia

O Windows 8 funciona com uma ampla variedade de formatos de mídia, conforme mostrado aqui. No entanto, para obter o melhor desempenho, recomendamos 1080p JPEG para imagens e 720p (ou 1080p) MP4 para vídeos – com vídeo H264 e áudio AAC.

Teste e validação do recurso Reproduzir em

O recurso Reproduzir em é fácil de testar e validar com algumas alguns PCs usando Windows Media Player como receptor do Reproduzir em. Eis aqui como fazê-lo:

  1. Configure dois PCs na sua rede doméstica – seu PC de desenvolvedor e outro PC executando Windows Media Player (WMP), para usar como receptor do Reproduzir em de teste.
  2. No PC funcionando como receptor do Reproduzir em de teste, abra o WMP e selecione o menu Fluxo. Depois, selecione Habilitar controle remoto do meu Player…
    • Funciona com WMP no Windows 7 e no Windows 8, mas recomendamos o uso do Windows 8, já que foi aprimorado.
    • Certifique-se de que o compartilhamento esteja habilitado nos dois PCs.
    • Verifique se você está em uma rede doméstica. Algumas redes corporativas têm configurações de firewall e políticas administrativas que podem interferir na descoberta do dispositivo Reproduzir em.
  3. No seu PC de desenvolvedor, vá até a página Dispositivos em Configurações do PC, selecione Adicionar um dispositivo e instale o Windows Media Player (que você configurou na etapa 2 acima).
  4. Você pode usar o WMP no segundo PC como dispositivo Reproduzir em de qualquer aplicativo que tenha implementado o contrato do botão Reproduzir em – incluindo o aplicativo Fotos, a amostra Reproduzir em e o seu aplicativo, se você implementar o contrato.

Também é possível usar o Xbox para testar e validar o Reproduzir em do seu aplicativo sem nenhuma configuração especial.

Conclusão e algumas indicações adicionais

Esperamos que você tenha achado esta postagem útil e informativa enquanto pensa na melhor maneira de criar uma ótima experiência Reproduzir em no seu aplicativo. Aguardamos seus comentários e perguntas nos comentários, além de seus aplicativos na Windows Store!

Veja algumas indicações úteis de documentações no Developer Center:

Vídeo e documentação de visão geral

Inícios rápidos

Referência de API e amostra de desenvolvedor

Obrigado,

Gabe Frost, Analy Otero e a equipe do recurso Reproduzir em

  • Loading...
Leave a Comment
  • Please add 3 and 7 and type the answer here:
  • Post