Lecture de contenu multimédia de A à Z (HTML)

Créer votre exemple

Si vous voulez suivre les étapes décrites ici pour ajouter des fonctionnalités multimédias à votre application, commencez par la rubrique Navigation plate de A à Z et le modèle de navigation plate associé. Vous pouvez également créer un projet d’application du Windows Store vide ou un projet de navigation dans Microsoft Visual Studio. Bien que l’exemple utilise la structure de navigation simple, il utilise également certaines fonctions d’assistance dans navigation.js, qui ne sont pas incluses dans le modèle vide. Il est donc plus simple de commencer avec l’un des modèles de navigation et de supprimer ce dont vous n’avez pas besoin.

Ou bien, passez directement à l’exemple Lecture de contenu multimédia de A à Z.

L’exemple implémente tous les étapes décrites ici, mais nous ne parcourrons pas le code ici. Chaque étape comporte une section "Identifier dans l’exemple" pour trouver rapidement le code.

La structure des fichiers sources de l’exemple est simple et plate, vous pouvez donc trouver facilement le code sans avoir à parcourir des couches de fichiers sources. Mais vous pouvez organiser votre projet comme vous le voulez.

Démarrage rapide : lecture de vidéos dans une application

Configurez les éléments de base pour les vidéos dans votre application. Cette rubrique de procédure est détaillée, mais il vous suffit d’ajouter un élément audio ou video à votre code HTML et de définir la propriété src dans un fichier multimédia pour permettre la lecture audio et vidéo simple.

Pour contrôler la lecture de contenu multimédia, utilisez les contrôles de transport intégrés en ajoutant l’attribut controls à l’élément audio ou l’élément video. Activez et désactivez les contrôles en définissant la propriété controls à true ou false. Les contrôles de transport fournissent des éléments d’interface utilisateur multimédias communs, notamment le bouton Lire et les contrôles de volume. Voici comment ces contrôles se présentent dans l’exemple.

Identifier dans l’exemple : l’élément video s’appelle mediaVideo et est défini en HTML dans le fichier \pages\mediaPlayer\mediaPlayer.js.

Comment ouvrir des fichiers multimédias locaux à l’aide du contrôle FileOpenPicker

Nous avons défini la lecture de contenu multimédia, nous devons maintenant définir la source multimédia pendant l’exécution de l’application.

Le contrôle FileOpenPicker permet à l’utilisateur de sélectionner un fichier à partir du système de fichiers local ou de Microsoft OneDrive. Cette étape vous montre comment configurer le FileOpenPicker et comment définir la propriété video.src pour le fichier retourné par le FileOpenPicker.

Utilisez StorageApplicationPermissions.futureAccessList pour stocker les autorisations pour les fichiers ouverts avec le FileOpenPicker. Vous pouvez ensuite accéder aux fichiers ultérieurement, par exemple quand l’application est relancée à partir d’un état arrêté.

Le FileOpenPicker se présente ainsi.

Le FileOpenPicker n’a pas besoin que votre application déclare des fonctionnalités pour les dossiers système, par exemple Musique, Vidéos et Documents. En effet, l’utilisateur a un contrôle total sur le FileOpenPicker et sur les fichiers qui sont ouverts. À des fins de sécurité et de confidentialité, votre application doit déclarer le moins de fonctionnalités possibles. Mais si vous voulez que votre application accède aux dossiers Vidéos et Musique sans entrée de l’utilisateur — pour afficher toutes les images d’album dans le dossier Musique par exemple — vous devez déclarer les fonctionnalités correspondantes. Pour plus d’informations, voir Déclarations des fonctionnalités d’application.

Identifier dans l’exemple : recherchez les fonctions setMediaSourceFromFilePicker et setMediaSourceFromFile dans \pages\mediaPlayer\mediaPlayer.js et le bouton de barre de l’application browseButton dans \pages\mediaPlayer\mediaPlayer.html.

Quand une application du Windows Store ne détecte par d’entrée utilisateur pendant un certain temps, la luminosité de l’écran diminue, puis l’écran s’éteint. Dans la plupart des applications cela est recommandé, car cela permet d’économiser l’énergie et de préserver l’autonomie de la batterie. Cependant, dans les applications multimédias, il n’est pas souhaitable que la luminosité diminue, car une vidéo est probablement en cours de lecture.

Utilisez la classe System.Windows.Display.DisplayRequest pour indiquer au système de ne pas diminuer la luminosité pour votre application. Annulez cette demande dès que votre application n’en a plus besoin, par exemple pour arrêter l’application, quand la lecture multimédia est terminée ou interrompue. Si vous ne procédez pas ainsi, l’autonomie de la batterie risque d’en pâtir.

Si le plein écran est activé via le bouton Plein écran dans les nouveaux contrôles de transport ou via la fonction msRequestFullscreen, le système gère automatiquement la désactivation et la réactivation de la luminosité de l’écran. Si la luminosité de l’écran ne doit être pas être diminuée en mode Plein écran uniquement, vous n’avez pas besoin de gérer DisplayRequest vous-même.

Identifier dans l’exemple : recherchez la fonction setScreenDimming dans \pages\mediaPlayer\mediaPlayer.js.

Comment lire du contenu audio en arrière-plan.

Configurons maintenant la prise en charge audio en arrière-plan pour que les utilisateurs puissent écouter de la musique tout en utilisant une autre application.

Quand une application qui lit de l’audio passe en arrière-plan, par exemple quand un utilisateur change d’application, par défaut l’audio est arrêté. Mais une application musicale peut choisir de continuer à lire l’audio.

Pour lire l’audio en arrière-plan, vous devez définir la tâche audio en arrière-plan dans la section Déclaration du manifeste de l’application. Et vous devez activer les propriétés isPlayEnabled et isPauseEnabled dans le SystemMediaTransportControls et gérer l’événement buttonpressed. Cela est obligatoire pour que l’utilisateur puisse lire et arrêter l’audio quand votre application n’est pas l’application active.

Identifier dans l’exemple : recherchez l’élément video dans \pages\mediaPlayer\mediaPlayer.html, la fonction setupSystemMediaTransportControls dans \pages\mediaPlayer\mediaPlayer.html, et la section Déclarations de package.appmanifest.xml pour activer la tâche en arrière-plan.

Comment créer des contrôles de transport personnalisés

Si vous devez étendre la fonctionnalité fournie par les contrôles de transport audio et video ou si vous voulez la remplacer, vous devez créer des contrôles de transport personnalisés. L’exemple Lecture de contenu multimédia de A à Z implémente tous les contrôles de transport personnalisés dans AppBar mais conserve les contrôles de transport intégrés. Si vous créez vos propres contrôles de transport personnalisés, remplacez l’interface utilisateur intégrée par la vôtre.

Pour désactiver les contrôles de transport intégrés, attribuez à controls la valeur false.

Cette procédure décrit comment créer des contrôles de transport personnalisés de lecture, pause, arrêt, avance rapide, curseur de position, plein écran, section audio, muet et volume.

Identifier dans l’exemple : recherchez les éléments AppBar dans \pages\mediaPlayer\mediaPlayer.html, et consultez \pages\mediaPlayer\mediaPlayer.js pour les gestionnaires d’événements qui implémentent ces fonctionnalités.

Ajout de barres d’application

Placez l’interface utilisateur qui interagit avec l’application et les objets audio et video dans les barres de l’application en utilisant WinJS.UI.AppBar. Les contrôles WinJS.UI.AppBarCommand sont conçus pour AppBar et fonctionnent parfaitement. Les types de contrôle suivants sont disponibles : « bouton », « bascule », « menu volant », « séparateur » et « contenu ».

L’énumération WinJS.UI.AppBarIcon contient un grand nombre de symboles que vous pouvez utiliser pour AppBarCommand.icon. Vous pouvez également fournir votre propre fichier PNG (Portable Network Graphics) personnalisé.

Voici à quoi ressemble le bouton AppBar dans l’exemple.

L’exemple utilise des menus volants pour le contrôle de sélection de piste audio et le contrôle du volume. Cela fait gagner de la place.

Pour plus d’informations sur l’utilisation de AppBar et la conception de votre application, voir Recommandations en matière de barres de l’application.

Identifier dans l’exemple : recherchez les éléments <div id="appBarTop" et <div id="appBarBottom" dans \pages\mediaPlayer\mediaPlayer.html. Si vous voulez savoir comment un contrôle et une fonctionnalité spécifiques sont implémentés, recherchez les boutons de la barre de l’application dans les gestionnaires d’événements dans \pages\mediaPlayer\mediaPlayer.js.

Recommandations en matière de paramètres de l’application

Utilisez le contrôle WinJS.UI.SettingsFlyout pour les applications du Windows Store en JavaScript.

Les paramètres sont utilisés pour les options de configuration qui affectent le comportement global de l’application et qui ne doivent normalement être modifiées qu’à l’occasion. L’exemple Lecture de contenu multimédia de A à Z crée un menu volant de paramètres Audio et de paramètres Vidéo utilisé pour stocker les paramètres de l’application.

Identifier dans l’exemple : recherchez app.onactivated dans \js\default.js. Les pages de paramètres audio.html, video.html, help.html, et privacy.html se trouvent dans le sous-dossier \settings.

Utilisation du Kit de certification des applications Windows

Recommandé. Exécutez le Kit de certification des applications Windows pour vérifier que votre application répond à toutes les exigences du Windows Store. Nous recommandons d’exécuter le Kit de certification des applications Windows quand vous ajoutez des fonctionnalités à votre application.