Langage: HTML | XAML

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

Découvrez comment créer des applications multimédias riches pour Windows 8.1 qui permettent de lire de l’audio et de la vidéo et qui préservent l’autonomie de la batterie et optimisent l’affichage.

Nous allons vous expliquer comment créer une application du Windows Store de A à Z en JavaScript qui propose des fonctionnalités multimédias. De nombreuses améliorations de Windows 8.1 rendent cela plus facile, notamment la nouvelle API msRequestFullscreen . Nous allons expliquer :

  • Éléments de base pour la lecture de contenu multimédia notamment l’utilisation des éléments HTML audio et video l’activation des contrôles de transport et le chargement des fichiers multimédias à partir d’un appareil ou du réseau.
  • Fonctionnalités de lecture de contenu multimédia, notamment comment empêcher l’affaiblissement de l’affichage, lire des sons en arrière-plan, comment interagir avec les contrôles de transport multimédias système, redimensionner de la vidéo, créer des contrôles de transport personnalisés et activer l’affichage plein écran.
  • Notions de base d’application notamment comment préserver l’état de l’application, créer une interface utilisateur dans la barre de l’application et créer des menus volants Paramètres.

Si vous débutez dans le développement d’applications du Windows Store en JavaScript, consultez Créer votre première application du Windows Store en JavaScript pour vous mettre à jour.

Chaque étape ci-dessous est liée à une rubrique de procédure qui comprend des exemples et du code, que vous pouvez consulter pour obtenir des informations supplémentaires.

L’exemple Lecture de contenu multimédia de A à Z comprend tous les éléments dont nous allons discuter ici. Nous ferons souvent référence à cet exemple et vous indiquerons les emplacements où les fonctionnalités spécifiques sont implémentées.

Capture d’écran de l’exemple Lecture de contenu multimédia

Créer une application multimédia

icône de début

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.

 

Éléments de base pour la lecture de contenu multimédia

icône d’étape

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.

Capture d’écran de l’application d’exemple montrant MediaElement avec contrôles de transport

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

icône d’étape

Formats audio et vidéo pris en charge

Les applications du Windows Store en JavaScript prennent en charge un grand nombre de formats audio et vidéo. Cliquez sur le lien pour une liste complète.

icône d’étape

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.

Capture d’écran du contrôle FileOpenPicker

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.

icône d’étape

Comment ouvrir des fichiers multimédias à partir du réseau

Le contrôle FileOpenPicker permet d’obtenir un fichier du système local, mais il ne fonctionne pas pour définir la source multimédia pour un fichier qui se trouve sur le réseau. Pour ce faire, définissez src au chemin d’accès du fichier multimédia sur le réseau.

Identifier dans l’exemple : recherchez les fonctions setMediaSourceFromTextBox et setMediaSourceFromPath dans \pages\mediaPlayer\mediaPlayer.js. Recherchez également l’élément txtSourceInput input dans \pages\mediaPlayer\mediaPlayer.html, qui est utilisé pour entrer le chemin d’accès multimédia.

 

Fonctionnalités de lecture de contenu multimédia

icône d’étape Comment conserver l’affichage lors de la lecture audio et vidéo

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.

icône d’étape

Comment utiliser les contrôles de transport multimédias système

Windows 8.1 propose une nouvelle classe pour l’interaction avec les contrôles de transport multimédias. Désormais, utilisez SystemMediaTransportControls à la place de la classe MediaControl.

Les contrôles de transport multimédias système sont différents des contrôles de transport de l’objet multimédia HTML. Il s’agit des contrôles qui s’affichent quand l’utilisateur appuie sur une touche multimédia matérielle, telle que la commande de volume d’un casque ou les boutons multimédias de certains claviers. Votre application peut utiliser ces contrôles et peut également renvoyer des métadonnées multimédias à ces contrôles, par exemple des images d’album ou des titres de chanson, pour les afficher.

Ces contrôles se présentent ainsi.

Capture d’écran des contrôles de transport multimédias système

Identifier dans l’exemple : recherchez les fonctions WinJS.UI.Pages.define, setupSystemMediaTransportControls et systemMediaControlsButtonPressed dans \pages\mediaPlayer\mediaPlayer.js. Ainsi que les gestionnaires d’événements mediaPlaying, mediaPaused, et mediaEnded dans \pages\mediaPlayer\mediaPlayer.js.

icône d’étape

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.

icône d’étape

Comment activer le rendu en plein écran

Les contrôles de transport intégrés pour les objets audio et video proposent un bouton Plein écran. Mais si vous voulez activer ou désactiver le rendu plein écran par programmation, utilisez la nouvelle fonction msRequestFullscreen.

Avant Windows 8.1, vous deviez calculer les limites du plein écran et afficher ou masquer l’interface utilisateur vous-même. Si cela n’était pas fait correctement, certaines optimisations de rendu n’étaient pas activées. C’est pourquoi, vous devez toujours utiliser la fonction msRequestFullscreen pour activer et désactiver le rendu plein écran. (C’est plus facile).

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

icône d’étape

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.

 

Éléments de base de l’application

icône d’étape

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.

Montre un AppBar avec AppBarButtons

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.

icône d’étape

Gérer le cycle de vie et l’état de l’application

L’enregistrement de l’état de votre application dans les applications du Windows Store est important, car votre application peut être interrompue en arrière-plan à tout moment et arrêtée par le système. Quand votre application est relancée, l’utilisateur s’attend à ce que le contenu multimédia et les paramètres de l’application soient inchangés.

Vous pouvez enregistrer l’état de l’application dans un stockage isolé sur l’appareil ou dans un stockage itinérant. Le stockage itinérant permet à l’utilisateur d’exécuter votre application sur plusieurs appareils et son état est partagé entre eux.

Il est important d’enregistrer les états video suivants : src, currentTime, loop, paused, ended, autoplay, et les audioTracks sélectionnés.

navigation.js sont des fonctions d’assistance qui font partie des modèles Visual Studio. Elles sont comprises dans tous les modèles à l’exception du modèle vide. Ces fonctions d’assistance permettent de gérer facilement l’interruption, la reprise et la reprise sur arrêt.

Certains états multimédias doivent être rétablis une fois le contenu multimédia chargé — par exemple, currentTime.

Identifier dans l’exemple : recherchez les fonctions app.oncheckpoint, navigationHelper_SaveState, restoreMediaState, mediaLoaded et appResumingFromSuspend dans \pages\mediaPlayer\mediaPlayer.js. Dans \js\default.js, recherchez app.onactivated.

icône d’étape

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.

 

Finalisation

icône de conditions requises du Windows Store

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.

icône stop

Vous avez terminé ! Vous venez d’explorer les différentes fonctionnalités de lecture de contenu multimédia, vous êtes prêt à créer une application semblable à l’exemple Lecture de contenu multimédia de A à Z.

 

Vous voulez en savoir plus ?

Interface utilisateur des applications du Windows Store de A à Z

En savoir plus sur la conception de l’interface utilisateur d’application du Windows Store .

Interaction utilisateur de A à Z

Découvrez comment ajouter les entrées tactiles à votre applications du Windows Store.

Feuille de route pour les applications du Windows Store en JavaScript

En savoir plus sur la création d’applications du Windows Store en JavaScript.

Conception de l’expérience utilisateur des applications

En savoir plus sur la conception d’expérience utilisateur de qualité.

Formats audio et vidéo pris en charge

Découvrez les formats audio et vidéo pris en charge dans les applications du Windows Store en JavaScript.

Performances audio et vidéo

Découvrez les recommandations en matière de performances pour les applications multimédias.

Démarrage rapide : ajout de contrôles et de styles WinJS

Découvrez les contrôles et les événements dans les applications du Windows Store en JavaScript.

Exemples connexes

 

 

Afficher:
© 2014 Microsoft