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

Article
02/12/2016

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Cette rubrique montre comment utiliser l’élément HTML5 Video pour lire une vidéo dans une application Windows Runtime en JavaScript.

Pour obtenir un autre exemple exploitant des éléments audio et vidéo dans une application Windows Runtime en JavaScript, voir l’exemple de lecture de contenu multimédia HTML.

Pour obtenir des informations sur les formats multimédias audio et vidéo pris en charge dans les applications Windows Runtime, voir Formats audio et vidéo pris en charge.

Prérequis

Dans cette rubrique, nous partons du principe que vous savez créer une application Windows Runtime de base en JavaScript. Pour obtenir de l’aide lors de la création de votre première application, voir Créer votre première application du Windows Store en JavaScript.

Instructions

1. Déclarer la capacité du client Internet

Ouvrez le fichier manifeste de l’application, package.appxmanifest.xml, et activez la Internet (Client) capability.

Dans Microsoft Visual Studio, ouvrez le concepteur pour le manifeste de l’application en double-cliquant sur l’élément package.appxmanifest dans l’Explorateur de solutions.
Cliquez sur Capacités.
Activez la case à cocher de la capacité Internet (Client) .

Cette capacité donne à l’application un accès sortant à Internet, qui est nécessaire pour lire une vidéo depuis une URL Internet.

Remarque Cette capacité n’est pas requise pour lire des fichiers vidéo locaux.

2. Ajouter l’élément vidéo

Ouvrez le fichier HTML nommé Default.html et ajoutez l’élément vidéo au corps du document.

<body>
  <video id="mediaVideo" src="https://www.contoso.com/clip.mp4" controls/>
</body>

Vous devez substituer une vraie URL à l’URL "https://www.contoso.com/clip.mp4" utilisée dans l’exemple.

L’élément Video fournit un jeu de contrôles de lecture intégrés qui permettent à l’utilisateur de démarrer ou d’interrompre la vidéo, de rechercher une nouvelle position et de régler le volume. Les contrôles de lecture ne s’affichent pas par défaut. Pour les activer, ajoutez l’attribut controls, comme suit. Les contrôles apparaissent lorsque l’utilisateur place sa souris au-dessus de la vidéo.

3. Définir les attributs de largeur et de hauteur

Si vous connaissez à l’avance les dimensions de la vidéo, il est judicieux de définir les attributs width et height sur l’élément video. Ces attributs donnent la taille de la disposition de l’élément, en pixels CSS (Cascading Style Sheets). Lorsque la page se charge, l’espace est réservé pour l’élément. Si vous ne renseignez pas les attributs de largeur et de hauteur, la page se redispositionne de manière dynamique une fois la vidéo téléchargée.

<body>
   <video src="https://www.contoso.com/clip.mp4" controls width=640 height=480/>
</body>

Les attributs de largeur et de hauteur spécifient toujours des pixels CSS, et n’acceptent pas d’unités. Par exemple, "5cm" et "100%" ne sont pas valides.

Si les attributs de largeur et de hauteur ne correspondent pas à la taille intrinsèque de la vidéo, le contrôle de la vidéo étire la vidéo, tout en conservant les proportions à l’aide de cadres au besoin. Toutefois, il est préférable d’éviter d’étirer la vidéo, car cela peut créer des artefacts visuels. Chaque fois que possible, encodez la vidéo à la taille d’affichage voulue.