Langage: HTML | XAML

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

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 C++, C#, ou Visual Basic qui propose des fonctionnalités multimédias. De nombreuses améliorations de Windows 8.1 rendent cela plus facile, notamment les nouveaux contrôles de transport pour la classe MediaElement. Nous allons les décrire ici, ainsi que les éléments suivants :

  • Éléments de base pour la lecture de contenu multimédia notamment la création d’un MediaElement, 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, créer des menus volants Paramètres et animer l’interface utilisateur.

Si vous débutez dans le développement d’applications du Windows Store en C++, C#, ou Visual Basic, consultez Créer votre première application du Windows Store en C# ou Visual Basic 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 de cette rubrique pour ajouter des fonctionnalités multimédias à votre application, vous pouvez créer un projet d’application du Windows Store vide dans Microsoft Visual Studio et ajouter un élément De base. L’élément De base ajoute automatiquement des classes d’assistance telles que SuspensionManager.cs qui simplifient l’enregistrement de l’état de l’application et la gestion de l’interruption et de la reprise. Pour ajouter un élément De base, dans Visual Studio, sélectionnez Projet>Ajouter un nouvel élément>Élément de base.

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

Éléments de base pour la lecture d’audio et de vidéo

Configurez les éléments de base pour la lecture d’audio et de vidéo dans votre application. Cette rubrique de procédure est détaillée, mais il vous suffit d’ajouter un objet MediaElement à votre code XAML et de définir la Source d’un fichier multimédia pour permettre la lecture audio et vidéo simple.

La classe MediaElement permet la lecture audio et vidéo.

Pour contrôler la lecture de contenu multimédia, Windows 8.1 propose de nouveaux contrôles de transport intégrés. Activez et désactivez les contrôles en définissant la propriété AreTransportControlsEnabled. 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 : le MediaElement s’appelle media et est défini en XAML dans le fichier MainPage.xaml.

icône d’étape

Formats audio et vidéo pris en charge

Les applications du Windows Store en C++, C#, ou Visual Basic 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 à 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é MediaElement.Source 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 méthodes Browse_Click et SetMediaSourceFromFile dans MainPage.xaml.cs et le appBarTextBoxFilePath TextBlock dans MainPage.xaml.

icône d’étape

Comment lire 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 cela, créez un objet Uri pour le chemin d’accès du fichier multimédia et utilisez-le pour MediaElement.Source.

Il est conseillé d’intercepter les exceptions autour du code qui définit la source multimédia.

Identifier dans l’exemple : recherchez les méthodes AppBarTextBoxFilePath_KeyUp et SetMediaSourceFromPath dans MainPage.xaml.cs. Recherchez également appBarTextBoxFilePath TextBlock dans le code XAML dans MainPage.xaml, 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 MediaElement ou via la propriété IsFullWindow, 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 les méthodes DisableScreenDimming et UpdateMediaState dans MainPage.xaml.cs.

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 MediaElement. 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 le constructeur MainPage et les méthodes systemControls_ButtonPressed et UpdateMediaState dans MainPage.xaml.cs.

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 le manifeste de l’applicationDeclarations. 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 le constructeur MainPage et les méthodes EnableBackGroundAudio et systemControls_ButtonPressed dans MainPage.xaml.cs. Consultez également la section Declarations de Package.appmanifest.xml pour activer la tâche en arrière-plan.

icône d’étape

Comment redimensionner et étirer une vidéo

La propriété MediaElement.Stretch définit la façon dont MediaElement occupe l’espace dans son conteneur. Les états Stretch sont comparables aux paramètres de format de l’image de nombreux téléviseurs. Vous pouvez lier cette propriété à un bouton d’interface utilisateur et permettre aux utilisateurs de choisir les paramètres qu’ils préfèrent.

  • None affiche la résolution native du contenu dans sa taille d’origine.
  • Uniform remplit autant d’espace que possible tout en préservant les proportions et le contenu de l’image. Des bandes noires horizontales ou verticales peuvent dès lors apparaître sur les bordures de la vidéo. L’effet obtenu est comparable aux modes grand écran.
  • UniformToFill remplit l’espace entier tout en préservant les proportions. Dans ce cas, une partie de l’image peut être rognée. L’effet obtenu est comparable aux modes plein écran.
  • Fill remplit l’espace entier, mais ne conserve pas les proportions. Si l’image n’est pas rognée, un étirement peut en revanche être observé. L’effet obtenu est comparable aux modes Étirer.

Vous trouverez ci-dessous des exemples de différentes valeurs d’étirement et la façon dont elles affectent l’affichage vidéo.

Exemple de rendu des différentes valeurs d’étirement

Identifier dans l’exemple : recherchez la méthode PictureSize_Click dans MainPage.xaml.cs.

icône d’étape

Comment activer le rendu en plein écran

Les contrôles de transport intégrés pour la classe MediaElement proposent un bouton Plein écran. Mais si vous voulez activer ou désactiver le rendu plein écran par programme, utilisez la nouvelle propriété IsFullWindow.

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. Utilisez toujours la propriété IsFullWindow pour activer et désactiver le rendu plein écran. C’est plus facile.

Identifier dans l’exemple : recherchez la méthode ToggleFullWindow dans MainPage.xaml.cs.

icône d’étape

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

Si vous devez étendre la fonctionnalité fournie par le contrôle de transport MediaElement 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 dans MediaElement. 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 à AreTransportControlsEnabled 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 l’élément <Page.BottomAppBar> dans MainPage.xaml, et consultez MainPage.xaml.cs pour les gestionnaires d’événements qui implémentent ces fonctionnalités. Le contrôle personnalisé qui sert à implémenter le curseur de position représente la majorité du code et se trouve à la fin de MainPage.xaml.cs.

 

É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 MediaElement dans AppBar. Les contrôles AppBarButton et AppBarToggleButton sont conçus pour AppBar et fonctionnent parfaitement.

La classe Symbol contient un grand nombre de symboles que vous pouvez utiliser pour AppBarButton.Icon. Vous pouvez utiliser vos propres icônes ou celles de la liste des icônes Segoe UI Symbol. Tous les boutons de l’exemple utilisent des icônes de Symbol.

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

Montre un AppBar avec AppBarButtons

L’exemple regroupe certaines fonctionnalités connexes dans un Flyout, par exemple les boutons d’image et audio. 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 d’application.

Identifier dans l’exemple : recherchez MainPage.xaml et <Page.TopAppBar> et <Page.BottomAppBar>. 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 MainPage.xaml.cs.

icône d’étape

Animation de votre interface utilisateur

Les animations peuvent rendre votre application plus dynamique. Même des animations subtiles peuvent différencier votre application. Les animations de base sont simples à créer, et le système fournit de nombreuses animations de transition intégrées.

L’exemple Lecture de contenu multimédia de A à Z crée un animation de fondu simple pour les messages texte. Il utilise Storyboard et DoubleAnimation dans la propriété Opacity de TextBlock. Le texte disparaît en fondu après quelques secondes.

Les animations de transition telles que EntranceThemeTransition peuvent donner des signaux visuels qui indiquent que l’état de votre application a changé. L’application d’exemple utilise EntranceThemeTransition dans certains des objets AppBarButton pour leur donner un mouvement léger quand la barre de l’application s’ouvre.

Note relative aux performances : n’animez pas l’objet MediaElement lui-même. Cela peut avoir un impact négatif sur les performances.

Identifier dans l’exemple : recherchez <Page.Resources> dans MainPage.xaml et la méthode DisplayMessage dans MainPage.xaml.cs.

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 MediaElement suivants : Source, Position, Stretch, IsLooping, CurrentState, AutoPlay, et AudioStreamIndex.

SuspensionManager.cs et NavigationHelper.cs sont des classes d’assistance qui font partie des modèles Visual Studio. Elles sont comprises dans tous les modèles à l’exception du modèle vide. Si vous créez un modèle vide, Visual Studio ajoute automatiquement ces fichiers si vous ajoutez un nouvel élément De base à votre projet. Ces classes d’assistance permettent de gérer facilement l’interruption, la reprise et la reprise sur arrêt. Reportez-vous aux méthodes LoadState et SaveState dans NavigationHelper.cs.

Certains états MediaElement doivent être rétablis dans le gestionnaire d’événements MediaOpen, notamment MediaElement.Position. En effet, le contenu multimédia doit être chargé avant que ces propriétés puissent être définies. Par exemple, NaturalDuration est défini après le chargement du contenu multimédia et la propriété Position ne peut pas être supérieure à NaturalDuration, vous devez donc définir Position après avoir défini NaturalDuration.

Identifier dans l’exemple : recherchez les méthodes navigationHelper_LoadState, navigationHelper_SaveState, Media_MediaOpened et RestoreMediaSourceState dans MainPage.xaml.cs. Dans App.xaml.cs, recherchez le constructeur App, OnLaunched, et OnSuspending pour le code d’installation et d’interruption SuspensionManager.

icône d’étape

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

Windows 8.1 propose désormais un contrôle SettingsFlyout pour les applications du Windows Store en C++, C#, ou Visual Basic. SettingsFlyout permet de créer facilement des pages de paramètres.

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 les méthodes OnLaunched et OnCommandsRequested dans App.xaml.cs pour l’installation. Chaque menu volant Paramètres utilise une méthode Show dans App.xaml.cs, telle que ShowAudioSettingsFlyout. Les menus volants AudioSettings.xaml, VideoSettings.xaml, HelpSettings.xaml, et PrivacySettings.xaml 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 (XAML)

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

Interaction utilisateur de A à Z (XAML) et Personnalisation de l’interaction utilisateur de A à Z (XAML)

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

Feuille de route pour les applications Windows Runtime en C# et Visual Basic et Feuille de route pour les applications Windows Runtime en C++

En savoir plus sur la création d’applications en général.

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 C++, C# ou Visual Basic.

Optimiser les ressources multimédias

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

Démarrage rapide : ajout de contrôles et gestion des événements

Découvrez les contrôles et les événements dans les applications du Windows Store en C++, C# ou Visual Basic.

Exemples connexes

 

 

Afficher:
© 2014 Microsoft