Résumer les méthodes d'insertion de vidéos dans des pages Web HTML

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 point de vue technique, y compris l'utilisation de balises vidéo, les attributs et méthodes multimédias qui peuvent être utilisés par les objets vidéo et les événements multimédias. Cet article présente principalement un résumé des méthodes d'insertion de vidéos dans. Les pages Web HTML. Les amis dans le besoin peuvent s'y référer, j'espère que cela pourra aider tout le monde.

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. , et une balise interne e02da388656c3265154666b7c71a8ddc. En plus de la balise e02da388656c3265154666b7c71a8ddc, 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 a1f02c36ba31691bcfe87b2722de723b, 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 à travers son nom . Cette propriété est utilisée 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 ae76bfc88a489ecb2c97288c9cdad308 ou 05337af1a55236746ad0827c5abc5f6d); et ne pas utiliser cet attribut dans la balise signifie faux (pas de lecture automatique ici est 19e1f8ade8f7b36b7291bedfcc4c695e).

(4) attribut de boucle

<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'œil, l'attribut de boucle est utilisé pour spécifier si la lecture en boucle vidéo est également 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 la page au navigateur Le producteur n'a pas utilisé de script pour générer le contrôleur de lecture et a demandé au navigateur d'activer sa propre barre de contrôle de lecture.

La barre de contrôle doit inclure le contrôle de lecture et de pause, le contrôle de progression de la lecture, le contrôle du 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.

(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 les médias (car l'audio Les balises peuvent également contenir cette balise, donc le média est utilisé ici au lieu de la vidéo) pour spécifier plusieurs adresses de fichiers sélectionnables (le navigateur ne peut en sélectionner qu'une à la fin), et ne peuvent être utilisées 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 pas 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 support est utilisé. Si elle n'est pas définie, la valeur par défaut est all, indiquant que tous les supports sont pris en charge. Avez-vous pensé à l'attribut média de la balise c9ccee2e6ea535a969eb3f532ad9fe89 Même pareil.

(8) Un exemple complet

<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>

Ce code définit une vidéo dans la page , l'aperçu L'image de cette vidéo est la valeur d'attribut de l'affiche, affiche la barre de contrôle multimédia par défaut du navigateur, précharge les métadonnées de la vidéo, joue en boucle, avec une largeur de 900 pixels et une hauteur de 240 pixels.

La première adresse vidéo sélectionnée est la valeur de l'attribut src de la première balise source, la catégorie vidéo est la vidéo Ogg, le codec vidéo est Theora, le codec audio est Vorbis et le support de lecture est le moniteur la deuxième vidéo sélectionnée ; L'adresse ne sera plus répétée. Si vous souhaitez toujours être compatible avec IE, vous pouvez ajouter la balise Flash Player définie après la dernière balise source ou utiliser un peu de code JavaScript.

Comment utiliser H5 pour faire fonctionner l'audio et la vidéo

Tutoriel de lecture vidéo HTML5

Vidéo et audio HTML5 étapes de mise en œuvre

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!