Une utilisation réussie de la fonctionnalité Lire sur dans vos applications Windows 8 (et les sites Web !)

Article
11/26/2012

Présentation de la fonctionnalité Lire sur

La fonctionnalité Lire sur vous permet de diffuser de la musique, des photos et des vidéos issues d'applications sur Xbox et d'autres périphériques pris en charge sur votre réseau domestique. Imaginez que vous puissiez facilement parcourir du doigt vos photos et vidéos à partir de votre application sur le grand écran de votre téléviseur. Ou écouter de la musique à partir de votre application sur les haut-parleurs de votre salon. À l'aide du contrat Lire sur, vous pouvez facilement faire en sorte que ces scénarios deviennent réalité pour les utilisateurs de vos applications. Vos applications peuvent ainsi pénétrer dans le salon des utilisateurs.

Pour optimiser l'expérience de l'utilisateur final, du développeur et les performances du périphérique, nous avons conçu le contrat Lire sur en gardant quelques points à l'esprit :

Utilisateurs : sur les réseaux où les utilisateurs activent le partage (par exemple les réseaux domestiques), Windows 8 détecte et installe automatiquement les périphériques Lire sur certifiés Windows. Le système d'exploitation offre une expérience utilisateur homogène qui permet aux utilisateurs d'effectuer des mouvements de balayage et d'appuyer sur l'icône Périphériques pour lancer la fonctionnalité Lire sur à partir de n'importe quelle application prise en charge. Toutes les applications multimédias de Microsoft sont dotées d'une expérience Lire sur intégrée, notamment les applications Musique, Vidéo et Photos. Même Internet Explorer 10 implémente le contrat Lire sur afin que les utilisateurs puissent diffuser des photos, de la musique et des vidéos HTML5 à partir de pages Web.
Développeurs : le contrat Lire sur pour les développeurs représente une abstraction de niveau supérieur des technologies de diffusion multimédia sous-jacentes (protocoles, concordance des formats, transcodage, etc.) et facilite l'implémentation rapide (et le test) des expériences Lire sur dans une large gamme d'applications. Toutes les applications (et les pages Web HTML5 dans IE) bénéficient d'une expérience élémentaire par défaut et elles peuvent l'adapter ou l'abandonner.
Périphériques : l'expérience Lire sur dans Windows 8 est conçue pour fonctionner avec les périphériques Lire sur certifiés Windows. Les périphériques certifiés procurent une expérience homogène et fiable. Un certain nombre de sociétés du secteur de l'électronique travaillent sur la certification Lire sur pour différentes catégories de périphériques.Parmi ces catégories figurent les téléviseurs, les décodeurs, les haut-parleurs et les récepteurs audio. Comme il a été divulgué lors du salon international du jeu vidéo E3 (Electronics Entertainment Expo) cette année, la prise en charge des récepteurs Lire sur est une nouvelle fonctionnalité qui a été intégrée à environ 70 millions de consoles Xbox 360 dans la nouvelle version du tableau de bord de cet automne. Consultez régulièrement le blog Windows pour connaître les annonces liées aux périphériques !

Création d'expériences engageantes et interactives

Avec le contrat Lire sur, vous pouvez créer des expériences multi-écrans convaincantes qui enchanteront vos utilisateurs et permettront à votre application de se démarquer dans le Windows Store. Avec l'implémentation du contrat Lire sur, vous bénéficiez des avantages suivants :

Expériences sociales permettant aux utilisateurs de partager facilement leurs photos et vidéos préférées avec leurs proches sur le plus grand écran de leur domicile, directement à partir de votre application.
Expériences complémentaires permettant à l'application de s'appuyer sur un second écran. Il peut s'agir de l'utilisation simple d'une télécommande ou d'un système d'évaluation des morceaux par les utilisateurs, qui utilisent également des métadonnées complexes relatives aux albums et aux artistes.

Dans ce billet, nous utilisons l'exemple de développement et l'application Photos pour illustrer la création et le test d'une expérience Lire sur réussie.

Comment le contrat Lire sur fonctionne-t-il dans Windows 8 ?

Examinons d'abord l'expérience complète pour savoir comment le contrat Lire sur fonctionne du point de vue de l'utilisateur (à partir du moment où il rejoint un nouveau réseau jusqu'à la diffusion de données multimédia sur un périphérique).

Dans Windows 8, nous avons proposé une configuration simple pour le contrat Lire sur, sans compromettre la confidentialité ni la sécurité des utilisateurs sur les réseaux publics. Le partage est automatiquement activé sur les PC où le groupement résidentiel est configuré et sur les PC où l'utilisateur sélectionne la configuration rapide au moment de la première utilisation. En outre, lorsqu'un utilisateur rejoint un nouveau réseau, il est immédiatement invité à activer le partage et à se connecter aux périphériques. L'utilisateur peut également afficher ce message en appuyant de manière prolongée sur le nom du réseau dans le menu volant Connexion réseau.

Une fois le partage activé, Windows 8 détecte et installe automatiquement les périphériques Lire sur pris en charge sur le réseau en 30 secondes environ. Les utilisateurs peuvent voir si les périphériques sont disponibles sur la page Périphériques de l'écran Paramètres du PC. Ils peuvent également ajouter manuellement de nouveaux périphériques sur la page Périphériques de l'écran Paramètres du PC.

Une fois les périphériques Lire sur installés, Windows se souvient d'eux et suit automatiquement leur disponibilité sur le réseau. Désormais, à chaque fois que l'utilisateur utilise une application sur laquelle la fonctionnalité Lire sur est disponible, les périphériques apparaissent sur l'icône Périphériques.

Regardons de plus près comment cela fonctionne dans l'exemple de développement exécuté dans Visual Studio. Dans l'exemple, la fonctionnalité Lire sur est activée pour la vidéo « Big Buck Bunny ».

Comme cette application implémente le contrat Lire sur dans cette vue, nous pouvons effectuer un mouvement de balayage et voir les périphériques disponibles dans l'icône Périphériques.

La sélection d'un périphérique lance le contrat Lire sur. Dans ce cas, nous sélectionnons la Xbox 360, et comme vous pouvez le voir, le contrôle vidéo entre dans un mode où la vidéo est remplacée par une superposition de couleur grise. Les boutons de pause, lecture, recherche et volume contrôlent désormais la lecture sur le périphérique cible.

L'utilisateur peut mettre fin à la session en sélectionnant [Disconnect] (Déconnecter) dans l'icône Périphériques.

Qu'est-ce que le contrat Lire sur ?

L'implémentation du contrat Lire sur dans votre application est simple. Pour n'importe quelle vue de l'application, voici comment procéder :

Créez un objet PlayToManager pour la vue active.
Inscrivez l'événement SourceRequested pour recevoir une notification lorsque l'icône Périphériques est sélectionnée.
Définissez l'objet PlayToSource de manière à indiquer l'élément multimédia à diffuser dans cette vue. Selon que la source est un élément audio, vidéo ou image, l'icône Périphériques affiche uniquement les périphériques capables d'utiliser ce type multimédia. Si l'utilisateur sélectionne un périphérique, l'objet PlayToSource est envoyé au périphérique. L'objet PlayToSource peut être mis à jour pour diffuser le prochain élément une fois que la lecture de l'élément multimédia en cours sur le périphérique est terminée.

Examinons un exemple simple d'activation du contrat Lire sur pour un seul élément multimédia.

JavaScript

 <video id="videoplayer" src="https://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="https://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.

À quel moment implémenter le contrat Lire sur ?

Si votre application comprend des photos, de la musique ou des vidéos qu'il est préférable d'expérimenter sur grand écran ou sur un équipement stéréo de haute qualité, le contrat Lire sur est utile. Nous avons vu des développeurs concevoir des expériences formidables dans des applications aussi diverses que des applications de loisirs, de flux d'actualités, de podcast et multimédias.

Le contrat Lire sur est automatiquement activé pour lire les éléments musicaux et vidéo dans les applications Windows 8 (mais pas pour afficher les éléments image). Cette expérience par défaut est parfaitement adaptée aux éléments multimédias individuels. Toutefois, l'adaptation du contrat Lire sur peut donner lieu à des scénarios plus complexes, tels que les diaporamas et les sélections.

La diffusion en continu sur des périphériques avec le contrat Lire sur est prise en charge pour toutes les musiques, vidéos et images non protégées par DRM, comme les collections des utilisateurs et la diffusion multimédia en continu sur le Web. Le contenu DRM n'est pas pris en charge, car il est déjà proposé directement sur les périphériques, tels que la télévision connectée, à partir du Web.

Pour ce billet, nous utilisons l'application Photos pour illustrer une expérience Lire sur réussie. L'application Photos a été conçue pour devenir l'endroit idéal dans lequel les utilisateurs peuvent conserver leurs souvenirs numériques. Ils peuvent ainsi visionner, revivre, profiter, partager et s'immerger dans leurs souvenirs. Le fait de visionner ses souvenirs numériques sur grand écran à la maison optimise toute l'expérience et la rend beaucoup plus interactive.

Exemple de l'application Photos

L'application Photos a créé une vue Lire sur qui permet aux utilisateurs de contrôler le diaporama. Les utilisateurs peuvent ainsi voir l'ensemble des données multimédias dans un affichage Pellicule. Cet affichage leur permet de lire et d'interrompre les vidéos, de lancer un diaporama ou d'envoyer manuellement des éléments sur le téléviseur. Comme les photos et les vidéos sont lues sur le téléviseur, l'application tire parti de la place supplémentaire disponible sur l'écran du périphérique Windows 8 pour afficher plus de contenus, comme les éléments à venir et ainsi compléter l'expérience télévisuelle.

Il est important d'intégrer le contrat Lire sur au flux de vos applications. Pour l'application Photos, une vue Lire sur a été créée le long de la disposition principale de l'application.

Les utilisateurs peuvent ouvrir l'icône Périphériques et voir les périphériques compatibles où qu'ils soient dans l'application. Lorsqu'un utilisateur visionne une photo, une vidéo ou une collection, il a la possibilité d'ouvrir l'icône Périphériques et de voir les options relatives aux périphériques. Les utilisateurs peuvent envoyer un album entier à un autre périphérique tout en naviguant ou même envoyer un ensemble de photos sélectionnées dans différents albums.

Dans cet exemple, l'utilisateur a sélectionné un ensemble de photos et de vidéos qui seront envoyées au téléviseur. Lorsque l'utilisateur ouvre l'icône Périphériques, les périphériques capables de lire le type de contenu qui est sélectionné apparaissent. L'application doit simplement à ce stade spécifier la source du contenu.

Après avoir sélectionné un périphérique, il est possible que l'utilisateur souhaite savoir quel périphérique exactement effectue la lecture du contenu. L'application Photos crée un magnifique en-tête qui indique à quel endroit le contenu activé est diffusé en continu. Pour mettre en évidence l'élément multimédia en cours de lecture, la photo ou la vidéo est entourée d'un rectangle.

Voici ce à quoi ressemble l'application en cas de lecture sur le téléviseur :

Optimisation d'un diaporama

Les périphériques Lire sur certifiés Windows prennent en charge la mise en mémoire tampon préalable du prochain élément d'une sélection. Permettre au périphérique de mettre en mémoire tampon préalable le prochain élément d'une sélection constitue l'assurance de performances optimales, ce qui est d'une importance primordiale pour améliorer l'expérience utilisateur. Pour que les applications bénéficient de cette fonctionnalité, spécifiez la source Lire sur du « prochain » élément d'une sélection. Cette page MSDN Démarrage rapide explique en détail comment vos applications peuvent tirer parti de cette fonctionnalité avancée.

Lecture du diaporama sans interruption

Une session Lire sur poursuit la lecture jusqu'à ce que l'utilisateur la déconnecte. Ceci donne lieu à deux types de scénarios multitâches :

Les utilisateurs peuvent accéder à différents albums photo dans la même application. Dans ce scénario, l'application doit donner lieu à une expérience dans laquelle la fonctionnalité Lire sur continue lorsque l'utilisateur ne navigue plus dans le diaporama « en cours de lecture ». Dans l'application Photos par exemple, les utilisateurs peuvent sélectionner certaines photos et les partager par courrier électronique pendant que la lecture du diaporama se poursuit sur le téléviseur. Vous pouvez également rechercher le prochain ensemble de photos à afficher sans interrompre le diaporama en cours de lecture.
Les utilisateurs peuvent accéder à une autre application, par exemple pour consulter leur courrier électronique, pendant la diffusion d'un diaporama sur le téléviseur. Dans ce cas, l'application n'effectue aucune tâche. Windows continue automatiquement l'exécution de l'application en arrière-plan pendant qu'une session Lire sur est active. Les applications disposent d'environ 10 secondes pour envoyer une nouvelle image après l'affichage de celle en cours et d'approximativement 10 secondes pour envoyer le prochain élément audio ou vidéo après celui en cours pour maintenir la session active. À la fin du diaporama, de la musique, de la vidéo ou des sélections, Windows suspend l'application.

Ce qu'il faut faire et ne pas faire concernant le contrat Lire sur

Gardez à l'esprit la liste des opérations à faire et à ne pas faire lorsque vous concevez une expérience Lire sur de qualité.

À faire :

Informez l'utilisateur que votre application effectue la lecture sur un autre périphérique.
Privilégiez l'icône Périphériques pour que les utilisateurs se connectent aux périphériques (et se déconnectent).
Maintenez la session Lire sur active lorsque l'utilisateur accède à d'autres vues au sein de l'application.
Pour une sélection de morceaux de musique, de photos ou de vidéos, indiquez toujours le prochain objet PlayToSource pour optimiser les performances.
Consultez cette page de référence MSDN pour en savoir plus sur l'utilisation de la fonctionnalité Lire sur.

À ne pas faire :

N'ajoutez pas de boutons personnalisés pour démarrer ou terminer la fonctionnalité Lire sur dans l'application ; privilégiez l'icône Périphériques.

Qu'en est-il des sites Web ?

Tout comme avec les applications, le contrat Lire sur est automatiquement activé pour la musique, les vidéos et les images dans la nouvelle application IE10. IE essaie d'identifier le meilleur élément multimédia à utiliser comme source Lire sur, mais il favorise les éléments qui sont actuellement en cours de lecture, sélectionnés, activés et affichés.

Les éléments musicaux et vidéo d'une durée de 5 secondes ou moins, ainsi que les images d'une taille de 300x300 pixels ou moins, sont ignorés par IE et ne sont jamais activés automatiquement.

Consultez cette page MSDN pour prendre connaissance des recommandations et conseils en matière de création de pages Web Lire sur conviviales.

Remarques concernant les formats multimédias

Windows 8 fonctionne avec une grande variété de formats multimédias, comme indiqué ici. Afin d'optimiser les performances, nous recommandons toutefois le format JPEG 1080p pour les images et le format MP4 720p (ou 1080p) pour les vidéos, avec vidéo H264 et audio AAC.

Test et validation de la fonctionnalité Lire sur

La fonctionnalité Lire sur est facile à tester et à valider simplement avec quelques PC en utilisant le Lecteur Windows Media comme récepteur Lire sur. Voici comment cela fonctionne :

Configurez deux PC sur votre réseau domestique : votre PC de développement et un autre PC exécutant le Lecteur Windows Media à utiliser comme récepteur de test Lire sur.
Sur le PC qui joue le rôle de récepteur de test Lire sur, ouvrez le Lecteur Windows Media, sélectionnez le menu Diffuser en continu, puis Autoriser le contrôle à distance de mon Lecteur…
- Ceci fonctionne avec le Lecteur Windows Media à la fois sur Windows 7 et Windows 8, mais nous recommandons l'utilisation de Windows 8, car des améliorations ont été apportées.
- Vérifiez que le partage est activé sur les deux PC.
- Vérifiez que vous êtes sur un réseau domestique. Certains réseaux d'entreprise disposent de paramètres de pare-feu et de règles administratives susceptibles d'interférer avec la détection du périphérique Lire sur.
Sur votre PC de développement, accédez à la page Périphériques dans Paramètres du PC, sélectionnez Ajouter un périphérique et installez le Lecteur Windows Media (que vous avez configuré à l'étape 2 ci-dessus).
Vous pouvez utiliser le Lecteur Windows Media sur le second PC comme périphérique Lire sur depuis n'importe quelle application ayant implémenté le contrat Lire sur, y compris l'application Photos, l'exemple Lire sur et votre application si vous implémentez le contrat.

Vous pouvez également utiliser la Xbox pour tester et valider le contrat Lire sur depuis votre application sans configuration particulière.

Conclusion et indications complémentaires

Nous espérons que ce billet vous a aidé à mieux comprendre comment concevoir une expérience Lire sur réussie dans votre application. Nous sommes impatients de lire vos commentaires et questions et de voir vos applications dans le Windows Store !

Voici quelques indications utiles concernant la documentation proposée dans le Centre de développement :