Introduction détaillée à la balise vidéo en html5

Cet article vous apporte une introduction détaillée à la balise vidéo en HTML5. Elle a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'elle vous sera utile.

<video src="http://www.lorem.com/video/lorem.mp4" controls="controls" width="500" height="300"></video>

MP4 = fichier MPEG 4 utilisant le codec vidéo H264 et le codec audio AAC

WebM = WebM le fichier utilise le codec vidéo VP8 et le codec audio Vorbis

Ogg = Le fichier Ogg utilise le codec vidéo Theora et le codec audio Vorbis

Avec les informations ci-dessus, vous constaterez que seules les vidéos MP4 codées en h264 (MPEG -LA company), les vidéos au format webm codées par VP8 (société Google) et les vidéos au format ogg codées par Theora (développement iTouch) peuvent prendre en charge la balise html5

Que faire si le navigateur ne prend pas en charge la balise vidéo ?

Par exemple, le navigateur IE et les anciennes versions des navigateurs ne prennent pas très bien en charge HTML5. Que devons-nous faire lorsque les utilisateurs utilisent ces navigateurs pour ouvrir nos pages Web avec des vidéos ?

Nous pouvons écrire le code comme ceci :

<video src="http://sp.ntaotu.com/localhost-wordpress-phpstudy.mp4" controls="controls" width="500" height="300">您的浏览器不支持播放该视频！</video>

De cette façon, dans les navigateurs qui ne prennent pas en charge html5, le message "Votre navigateur ne prend pas en charge la lecture de cette vidéo !" !

Explication des paramètres étendus de la balise 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, nous n'aurons donc qu'à préparer quelques vidéos supplémentaires dans différents formats.

Utilisation :

<video width="500" height="250" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持此种视频格式。
</video>

lecture automatique : La présence de cet attribut signifie que la vidéo sera automatiquement lue une fois prête. Utilisation : autoplay="autoplay"

contrôles. : La présence de cet attribut Cela signifie afficher des contrôles à l'utilisateur, tels que des boutons de lecture, etc. Utilisation : controls="controls"

hauteur : définir la hauteur

largeur : définir la largeur

boucle : relecture automatique, utilisation : loop="loop"

preload : la vidéo est chargée et préparée pour la lecture lorsque la page est chargée, utilisation : preload="auto" - la vidéo entière est chargée lorsque la page est chargée ; preload="meta " - charge uniquement les métadonnées lorsque la page se charge ; preload="none" - ne charge pas la vidéo lorsque la page se charge. Remarque : Si la lecture automatique est utilisée, le préchargement sera ignoré !

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!