Tutoriel HTML5-Vidéo

Bonjour à tous, HTML5 représente un énorme pas en avant dans le développement web front-end au cours de la dernière décennie. Contrairement aux versions précédentes, HTML 5 n'est pas seulement utilisé pour représenter le contenu Web. Sa nouvelle mission est de faire du Web une plate-forme d'application mature. Sur la plate-forme HTML 5, la vidéo, l'audio, les images, les animations et les interactions informatiques sont standardisés. .

Ensuite, je vais vous présenter le tutoriel-vidéo HTML5.

De nombreux sites internet tendances proposent des vidéos. HTML5 fournit une norme pour l'affichage de vidéos.

Vidéos sur le Web

Jusqu'à présent, il n'existait aucune norme pour afficher des vidéos sur les pages Web.

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.

Format vidéo

Actuellement, l'élément vidéo prend en charge trois formats vidéo :

Ogg : avec encodage vidéo Theora et encodage audio Vorbis Ogg fichier ;

MPEG4 : fichier MPEG 4 avec encodage vidéo H.264 et encodage audio AAC

WebM : fichier WebM avec encodage vidéo VP8 et encodage audio Vorbis ;

Comment ça marche

Pour afficher une vidéo en HTML5, tout ce dont vous avez besoin est :

<video src=”movie.ogg” controls=”controls”>
</video>

L'attribut control pour ajouter des commandes de lecture, de pause et de volume.

C'est également une bonne idée d'inclure des attributs de largeur et de hauteur. Le contenu inséré entre

est destiné aux navigateurs qui ne prennent pas en charge l'élément vidéo à afficher :

Exemple :

<video src=”movie.ogg” width=”320″ height=”240″ controls=”controls”>
Your browser does not support the video tag.
</video>

L'exemple ci-dessus utilise un fichier Ogg et convient aux navigateurs Firefox, Opera et Chrome.

Pour garantir son fonctionnement avec Safari, le fichier vidéo doit être de type MPEG4.

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 :

Exemple :

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

Internet Explorer

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.

Ce qui précède est le contenu du didacticiel vidéo HTML5. Pour plus de contenu connexe, veuillez prêter attention à. le site PHP chinois (www.php .cn) !