Comment ajouter, lire et contrôler des vidéos en HTML

Avec le développement de la technologie Internet, de plus en plus de sites Web commencent à utiliser des vidéos pour afficher du contenu. Pour les développeurs de sites Web, comment ajouter des vidéos aux pages Web et les faire jouer normalement est une question courante. Cet article explique comment ajouter, lire et contrôler des vidéos en HTML.

1. Balise vidéo en HTML5

La façon d'ajouter une vidéo en HTML5 est d'ajouter une balise vidéo dans le code HTML. Plus précisément, utilisez les balises suivantes :

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

Dans ce code, l'attribut "src" est utilisé pour définir l'URL du fichier vidéo. Comme indiqué dans le code ci-dessus, "movie.mp4" et "movie.ogg" représentent le. Format MP4 et OGG de la vidéo respectivement. Si le navigateur prend en charge la lecture vidéo, l'une d'entre elles sera sélectionnée pour la lecture. Si aucune des vidéos n'est prise en charge, le contenu de la dernière balise sera affiché "Votre navigateur ne prend pas en charge la balise vidéo".

Parmi eux, « largeur » et « hauteur » peuvent être utilisés pour spécifier la largeur et la hauteur de la vidéo. L'attribut CONTROLS est utilisé pour ajouter une barre de contrôle pour le lecteur vidéo.

2. Contrôler la lecture vidéo

Après avoir ajouté la vidéo, nous pouvons contrôler la vidéo via le code suivant :

var video = document.getElementsByTagName("video")[0];
video.play(); //播放
video.pause(); //暂停
video.currentTime = 0; //设置当前时间为 0 秒
video.volume = 0.5; //设置音量为一半

Parmi elles, les fonctions "play()" et "pause()" sont utilisées pour lire et mettre en pause la vidéo. video respectivement, et l'attribut currentTime Utilisé pour définir l'heure actuelle de la lecture vidéo, et l'attribut volume est utilisé pour définir le volume de la vidéo.

3. Prise en charge des fichiers vidéo dans plusieurs formats

Afin de permettre à davantage de navigateurs de prendre en charge la lecture vidéo, des fichiers vidéo dans plusieurs formats peuvent être utilisés et plusieurs sources peuvent être fournies en même temps.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

Trois formats différents sont proposés ici pour différents navigateurs et systèmes d'exploitation, en essayant de garantir l'étendue de la couverture vidéo.

4. Option de préchargement vidéo

La balise vidéo en HTML5 fournit également l'attribut de préchargement. Vous pouvez choisir de télécharger la vidéo à l'avance lorsque la page est chargée pour éviter le décalage vidéo.

Prend en charge trois valeurs pour l'attribut preload :

• preload = "none" : Ne pas télécharger à l'avance.
• preload = "metadata" : Téléchargez les métadonnées de la vidéo, telles que la durée de la vidéo, la piste audio et d'autres informations.
• preload = "auto" : Téléchargez l'intégralité du fichier vidéo.

Lorsque l'attribut de préchargement reçoit la valeur "auto", la vidéo sera téléchargée pendant le processus de chargement de la page. À ce moment, l'état de chargement de la vidéo peut être obtenu via JavaScript.

var video = document.getElementsByTagName("video")[0];
video.load(); //下载整个视频文件
console.log(video.buffered.end(0)); //输出已下载部分

5. Utiliser des vidéos YouTube dans des pages Web

En plus d'intégrer des fichiers vidéo directement via des balises vidéo, vous pouvez également intégrer des vidéos YouTube pour la lecture vidéo. La mise en œuvre spécifique est la suivante :

• Vous devez d'abord trouver la vidéo que vous souhaitez intégrer sur YouTube.
• Ajoutez le code HTML suivant à la page :

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

ps : Le "VIDEO_ID" ici est l'identifiant unique de la vidéo.

• Ajustez ensuite le style CSS de la manière standard.

6. Compatibilité des navigateurs

La méthode d'ajout de vidéo en HTML5 a été largement prise en charge dans les navigateurs modernes, mais il existe encore des navigateurs plus anciens qui ne prennent pas en charge les vidéos HTML5. Ces navigateurs peuvent prendre en charge la lecture vidéo via JavaScript et Flash.

• Via JavaScript : Vous pouvez utiliser des bibliothèques comme video.js ou JWPlayer.
• Via Flash : intégrez le lecteur Flash dans la page via swfobject et swfmedia, puis chargez la vidéo.

Résumé

Cet article explique comment ajouter, lire et contrôler des vidéos en HTML, et présente certaines fonctionnalités de lecture couramment utilisées. Au cours du processus de développement proprement dit, les développeurs doivent prêter attention aux problèmes de compatibilité et fournir des fichiers vidéo dans une variété de formats différents pour garantir que chaque navigateur puisse parfaitement prendre en charge la lecture vidéo.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!