Introduction aux balises vidéo
La plupart des utilisateurs ont installé le plug-in Flash (en fait, environ 95 % des internautes ont installé une version de Flash), mais les partisans de HTML 5 sont faire pression pour une norme vidéo ouverte et sans plug-in. C'est l'idée suscitée par la nouvelle balise <video> de HTML 5, qui permet d'intégrer (et d'interagir avec) des vidéos sans avoir besoin de plug-ins propriétaires comme Flash.
Jusqu’à présent, il n’existait aucune norme pour afficher des vidéos sur les pages Web.
Prise en charge des navigateurs
Internet Explorer 9+, Firefox, Opera, Chrome et Safari prennent en charge l'élément <video> Explorer 8 ou les versions antérieures d'IE ne prennent pas en charge l'élément <video>
Utilisation de la balise vidéoLa balise vidéo contient plusieurs attributs tels que src, poster, préchargement, lecture automatique, boucle, contrôles, largeur, hauteur , etc. , et une balise interne <source>. En plus de la balise <source>, la balise Vidéo peut également contenir du contenu renvoyé lorsque la vidéo spécifiée ne peut pas être lue.
(1) attribut src et attribut poster
Vous pouvez imaginer à quoi sert l'attribut src. Comme la balise <img>, cet attribut permet de préciser l'adresse de la vidéo. L'attribut poster est utilisé pour spécifier une image à afficher (image d'aperçu) lorsque les données vidéo actuelles ne sont pas valides. Des données vidéo invalides peuvent signifier que la vidéo est en cours de chargement, que l'adresse vidéo peut être incorrecte, etc.
(2) attribut de préchargement
Cet attribut peut également être compris par son nom. Cet attribut est utilisé pour définir si le. la vidéo est préchargée. L'attribut a trois valeurs facultatives : aucune, métadonnées et auto. Si cet attribut n'est pas utilisé, la valeur par défaut est auto.
Aucun : pas de préchargement. En utilisant cette valeur d'attribut, il est possible que l'auteur de la page pense que l'utilisateur ne s'attend pas à cette vidéo, ou qu'il réduise la requête HTTP.
Métadonnées : Partiellement préchargées. L'utilisation de cette valeur d'attribut signifie que l'auteur de la page estime que l'utilisateur ne s'attend pas à cette vidéo, mais fournit à l'utilisateur certaines métadonnées (notamment les dimensions, la première image, la liste des pistes, la durée, etc.).
Auto : tous préchargés.
(3) l'attribut de lecture automatique
est un autre attribut dont l'utilisation peut être connue par son nom. L'attribut Lecture automatique est utilisé pour définir si la vidéo est lue automatiquement. Il s'agit d'un attribut booléen. Lorsqu'il apparaît, cela signifie une lecture automatique. S'il est supprimé, cela signifie une lecture non automatique.
Notez que les valeurs des attributs booléens en HTML ne sont ni vraies ni fausses. L'utilisation correcte consiste à utiliser cet attribut dans une balise pour indiquer vrai. À ce stade, soit l'attribut n'a aucune valeur, soit sa valeur est égale à son nom (ici, la lecture automatique est <lecture automatique de la vidéo /> ou <lecture automatique de la vidéo. =" autoplay" />); et ne pas utiliser cet attribut dans la balise signifie faux (pas de lecture automatique ici est <video />).
(4) attribut de boucle
En un coup d'œil, l'attribut loop permet de préciser si la vidéo est lue en boucle, ce qui est également un attribut booléen.
(5) attribut Controls
L'attribut Controls est utilisé pour indiquer au navigateur que l'auteur de la page n'a pas utilisé de script pour générer des contrôleurs de lecture, et le navigateur doit activer sa propre colonne de commandes de lecture.
La barre de contrôle doit inclure le contrôle de pause de lecture, le contrôle de progression de la lecture, le contrôle de volume, etc.
La barre de contrôle de lecture par défaut de chaque navigateur est différente dans l'interface. En raison d'un problème étrange avec mon navigateur, les balises vidéo de Firefox et Safari ne fonctionnent pas correctement, je ne peux donc trouver que des captures d'écran de ces deux-là en ligne.
(6) L'attribut width et l'attribut height
sont des attributs courants des balises. Inutile de dire que cela va sans dire.
Prise en charge du format vidéo et du navigateur
Actuellement, l'élément <video> prend en charge trois formats vidéo : MP4, WebM et Ogg :
Navigateur 🎜>Internet Explorer OUI OUI NON NON Chrome OUI OUI OUI OUI Opera 25 et supérieur) OUI OUI OUI MP4 = fichier MPEG 4 avec vidéo H.264 encodage et encodage audio AAC WebM = fichier WebM avec encodage vidéo VP8 et encodage audio Vorbis
Ogg = Avec encodage vidéo Theora et fichier Ogg encodé audio Vorbis
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">缩小</button>
<button onclick="makeNormal()">普通</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=600;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>section suivante