Maintenant, si vous souhaitez utiliser la balise vidéo dans la page, vous devez considérer trois situations : celles qui prennent en charge Ogg Theora ou VP8 (si rien n'arrive à cette chose) (Opera, Mozilla, Chrome), celles qui prennent en charge H .264 (Safari, IE 9, Chrome), ne sont pas pris en charge (IE6, 7, 8). Bon, comprenons maintenant la vidéo HTML 5 d'un niveau technique, y compris l'utilisation de balises vidéo, les attributs et méthodes multimédias pouvant être utilisés par les objets vidéo et les événements multimédias.
Utilisation de la balise vidéo
La balise vidéo contient plusieurs attributs tels que src, poster, préchargement, lecture automatique, boucle, contrôles, largeur, hauteur, etc., ainsi qu'une balise utilisée en interne < ;source>. En plus de la balise
(1) attribut src et attribut poster
Vous pouvez imaginer à quoi sert l'attribut src. Comme la balise , 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.
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay"></video>
(2) attribut de préchargement
Cet attribut peut également être compris par son nom. Cet attribut est utilisé pour définir si 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.
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>
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 en regardant 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.
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>
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
(4) attribut loop
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></video>
En un coup d'oeil, l'attribut loop permet de préciser si la vidéo est lue en boucle. C'est aussi un attribut booléen.
(5) attribut Controls
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"></video>
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 un contrôleur de lecture, et le navigateur doit activer sa propre barre de contrôle 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 d'en dire plus à ce sujet.
(7) balise source
<video width="658" height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv" /><source src="http://www.youname.com/images/first.ogg" /></video>
La balise Source est utilisée pour spécifier plusieurs options pour le média (car la balise audio peut également contenir cette balise, donc le média est utilisé ici à la place de la vidéo ) (le navigateur ne peut finalement en sélectionner qu'une) adresse de fichier, et ne peut être utilisée que lorsque la balise media n'utilise pas l'attribut src.
Le navigateur vérifie si la vidéo spécifiée par la balise peut être lue dans l'ordre de la balise source (il se peut que le format vidéo ne soit pas pris en charge, la vidéo n'existe pas, etc.). ne peut pas être joué, passez au suivant. Cette méthode est principalement utilisée pour être compatible avec différents navigateurs. La balise Source en elle-même ne veut rien dire et ne peut apparaître seule.
Cette balise contient trois attributs : src, type et media.
Attribut src : utilisé pour préciser l'adresse du média, la même que la balise vidéo.
Attribut Type : utilisé pour décrire le type de média spécifié par l'attribut src, aidant le navigateur à déterminer s'il prend en charge cette catégorie de formats multimédia avant d'obtenir le média.
Attribut Media : utilisé pour décrire le support dans lequel le média est utilisé. S'il n'est pas défini, la valeur par défaut est all, indiquant que tous les médias sont pris en charge. Avez-vous pensé à l'attribut média de la balise
