Comment afficher une vidéo en HTML5 ? Lecture vidéo HTML5 : compétences du didacticiel demo_html5

Aujourd'hui, la plupart des vidéos sont affichées via des plug-ins tels que Flash. Cependant, tous les navigateurs ne disposent pas des mêmes plugins.

HTML5 spécifie une manière standard d'inclure une vidéo via l'élément vidéo.
En HTML5, l'élément vidéo prend actuellement en charge trois formats de fichiers vidéo,
1.Ogg = fichier Ogg avec encodage vidéo Theora et encodage audio Vorbis
2.MPEG4 = avec fichier vidéo MPEG 4 H.264 avec encodage et encodage audio AAC
3.WebM = fichier WebM avec encodage vidéo VP8 et encodage audio Vorbis

Alors comment afficher la vidéo en HTML5 ? L'exemple est le suivant :

Copier le code

Le code est le suivant :

D'accord, expliquons maintenant la signification de chaque attribut dans l'élément vidéo. Je ne parlerai pas principalement des contrôles. sont des commandes, Haha, ce sont les commandes pour la lecture vidéo, le volume et la pause. Si vous êtes malin, sachez que les caractères chinois insérés au milieu de l'élément vidéo rappellent que le navigateur de l'utilisateur ne prend pas en charge l'utilisation des formats vidéo.

Il est à noter que pour garantir qu'il soit adapté au navigateur Safari, le fichier vidéo doit être de type MP4. La vidéo au format ogg convient aux navigateurs Firefox, Opera et Chrome. Internet Explorer 8 ne prend pas en charge l'élément vidéo. Dans IE 9, l'élément vidéo utilisant MPEG4 sera pris en charge.

Bien sûr, si nous ne sommes pas sûrs des formats vidéo pris en charge par notre navigateur, nous pouvons d'abord le vérifier. La méthode de détection se trouve dans un autre article de blog. Si vous êtes intéressé, vous pouvez le consulter. Que dois-je faire si je ne veux pas déranger ? On peut faire ceci :

Copiez le code

Le code est le suivant :

"movie.mp4" type="video/mp4">
Votre navigateur ne prend pas en charge ce format vidéo.

L'élément vidéo autorise plusieurs éléments sources. L'élément source peut lier différents fichiers vidéo. Le navigateur utilisera le premier format reconnu, il nous suffira donc de préparer quelques vidéos supplémentaires dans différents formats.
Ensuite, introduisons les attributs de plusieurs balises vidéo.
1.autoplay : L'apparition de cet attribut signifie que la vidéo sera automatiquement lue lorsqu'elle sera prête. Utilisation : autoplay="autoplay"
2. contrôles : L'apparence de cet attribut Attribut signifie afficher des contrôles à l'utilisateur, tels que des boutons de lecture, etc. Utilisation : controls="controls"
3.height : Définir la hauteur
4.width : Définir la largeur
5.loop : Relecture automatique, utilisation : loop="loop"
6.preload : La vidéo est chargée et prête à être lue lorsque la page est chargée Utilisation : preload="auto"
auto - charger l'intégralité. vidéo lorsque la page est chargée
méta - lorsque la page ne charge les métadonnées qu'après le chargement
aucune - Ne chargez pas la vidéo une fois la page chargée
Remarque : si la lecture automatique est utilisée, le préchargement est ignoré
7.src : URL de la vidéo à lire