Commentaire: La plupart des vidéos sont affichées via des plug-ins (comme Flash). Cependant, tous les navigateurs n'ont pas le même plug-in, HTML5 spécifie un moyen standard d'inclure des vidéos via des éléments vidéo, qui peuvent être utilisés pour terminer la lecture vidéo
Aujourd'hui, la plupart des vidéos sont affichées via des plugins (tels que Flash). Cependant, tous les navigateurs n'ont pas le même plug-in.HTML5 spécifie un moyen standard d'inclure des vidéos via des éléments vidéo.
Dans HTML5, l'élément vidéo prend actuellement en charge trois formats de fichiers vidéo.
1.ogg = fichier ogg avec codage vidéo théora et codage audio Vorbis
2.MPEG4 = fichier MPEG 4 avec codage vidéo H.264 et codage audio AAC
3.Webm = fichier webm avec codage vidéo VP8 et codage audio Vorbis
Alors, comment afficher des vidéos dans HTML5? Les exemples sont les suivants:
<video src = "Demo.mp4" Controls = "Controls"> Votre navigateur ne prend pas en charge ce format vidéo. </ vidéo>
D'accord, expliquons la signification de chaque attribut dans l'élément vidéo. Parmi eux, la largeur et la hauteur ne seront pas expliquées. Nous parlons principalement des contrôles. Comme son nom l'indique, les contrôles sont des contrôles, haha, ce sont des contrôles tels que la lecture vidéo, la pause de volume, etc. Les caractères chinois insérés au milieu de l'élément vidéo, vous devez savoir qu'ils sont intelligents, et ils invitent l'utilisateur que le navigateur ne prend pas en charge l'utilisation du format vidéo.
Il convient de noter que pour s'assurer qu'il convient au navigateur Safari, le fichier vidéo doit être de type MP4. Les vidéos de format OGG conviennent aux navigateurs Firefox, Opera et Chrome. Internet Explorer 8 ne prend pas en charge les éléments vidéo. Dans IE 9, la prise en charge des éléments vidéo utilisant MPEG4 est fournie.
Bien sûr, si nous ne savons pas quel format de vidéos que notre navigateur prend en charge, nous pouvons d'abord le vérifier. La méthode de détection est disponible dans un autre article de blog. Si vous êtes intéressé, vous pouvez le vérifier. Si vous ne voulez pas être gênant, que devez-vous faire? Nous pouvons faire ceci:
<video contrôles = "Controls">
<source src = "film.ogg" type = "vidéo / ogg">
<source src = "film.mp4" type = "vidéo / mp4">
Votre navigateur ne prend pas en charge ce format vidéo.
</ vidéo>
L'élément vidéo permet plusieurs éléments source. L'élément source peut lier différents fichiers vidéo. Le navigateur utilisera le premier format reconnaissable, nous avons donc juste besoin de préparer quelques vidéos supplémentaires dans différents formats.
Ensuite, nous présenterons les propriétés de plusieurs balises vidéo.
1.Autoplay: cette propriété apparaît signifie que la vidéo joue automatiquement lorsqu'elle sera prête. Utilisation: AutoPlay = AutoPlay
2.Contrôles: Cette propriété apparaît signifie que l'utilisateur est affiché avec des contrôles, tels que des boutons de lecture, etc. Utilisation: Contrôles = Controls
3.Height: Sigle de hauteur
4.Width: set largeur
5.Loop: relecture automatique, utilisation: boucle = boucle
6.preload: la vidéo est chargée et prête à être lue lorsque la page est chargée. Utilisation: précharge = auto
Auto - Chargez toute la vidéo après le chargement de la page
Meta - Seules les métadonnées sont chargées après le chargement de la page
Aucun - la vidéo n'est pas chargée après le chargement de la page
Remarque: Si la lecture automatique est utilisée, la précharge est ignorée.
7.Src: l'URL pour lire la vidéo