Notes d'étude sur la balise vidéo HTML5 (lecteur) (1) : Mise en route_Compétences du didacticiel HTML5

J'ai récemment étudié l'utilisation de la balise vidéo (lecteur) en HTML5. Voici quelques notes d'étude pour faciliter votre propre révision et enregistrement. Cet article est le premier et présentera ce qu'il faut faire lors de l'utilisation de cette balise. initialisez-le.

Il existe en fait de nombreux tutoriels en ligne. Ceux de w3cschool sont les plus simples et les plus détaillés, donc ces quelques-uns présentent des applications plus directes.

Répertoire de cet article :

1. Utilisez des balises
2. Ajoutez certains paramètres nécessaires
3. Jouez ou chargez automatiquement
4. Standardisez le lecteur

.

Première étape : utiliser des balises

La méthode à utiliser est très simple, une seule ligne de code :

Copiez le code

Le code est comme suit :

Étape 2 : Ajoutez quelques paramètres nécessaires, tels que le chemin de lecture de la vidéo et l'affichage ou non de la barre de contrôle

Pour lire une vidéo, vous devez avoir l'adresse de la vidéo, ce qui signifie définir l'attribut src dans la balise. Si vous ne pouvez pas créer votre propre barre de contrôle personnalisée au début, utilisez simplement celle par défaut du navigateur et ajoutez des contrôles, pour que cela ressemble à ceci :

Copiez le code

Le code est le suivant :

Étape 3 : Laisser la vidéo jouer ou se charger automatiquement

Une chose que vous devez souvent faire lorsque vous utilisez un lecteur est de commencer à lire la vidéo dès que la page est chargée. Ensuite, vous devez configurer la vidéo pour qu'elle soit lue automatiquement, c'est-à-dire définir l'attribut de lecture automatique.

Copier le code

Le code est le suivant :

Parfois, la lecture automatique n'est pas requise pour certaines habitudes des utilisateurs, mais pour que les utilisateurs puissent voir la vidéo rapidement, la vidéo doit être chargée automatiquement, puis l'attribut de préchargement doit être défini. Il convient de noter que ce n'est pas le cas. complet au lieu de charger cette vidéo, seule la première partie sera chargée.

Copier le code

Le code est le suivant :

Étape 4 : Rendre le lecteur plus standardisé

Que signifie rendre le joueur plus standardisé ? C'est-à-dire qu'il y a une barre de contrôle (déjà introduite auparavant), l'écran que vous voyez avant de commencer la lecture et la taille du lecteur est spécifiée.

Si le lecteur charge la vidéo, vous pouvez voir un écran d'initialisation au début, mais il est souvent nécessaire de définir une image pour que la vidéo soit vue au début de la vidéo (parfois afin d'attirer le public, une image Les images qui n'ont pas grand-chose à voir avec la vidéo, vous savez), ou en raison de problèmes de réseau, n'affichent pas d'écran noir au public avant le chargement de la vidéo. À ce stade, vous devez également effectuer un tel réglage, c'est-à-dire définir l'attribut poster. Disponible :

Copier le code

Le code est le suivant :

De manière générale, lors du processus de candidature, le lecteur a une taille spécifiée, donc pour définissez la longueur et la largeur du lecteur, vous pouvez utiliser la feuille de style. Elle peut être définie à l'intérieur ou via l'attribut largeur hauteur. Il convient de noter que la largeur et la hauteur du lecteur doivent être définies en fonction de la proportion de la vidéo. Sinon, la vidéo sera vide à la fin si la largeur et la hauteur du lecteur dépassent les pixels de la vidéo. un effet d'étirement flou sera visible, donc lors du réglage de la largeur, vous devez faire attention lorsqu'elle est haute, mais vous pouvez d'abord définir uniquement la largeur ou la hauteur à observer, puis obtenir les pixels précis, tels que

Copier le code

Le code est le suivant :

Après avoir défini la largeur, j'ai vu dans l'outil de débogage du navigateur que la hauteur adaptative est de 165, puis j'ai défini la hauteur sur 165 à ce moment

Copier code

Le code est le suivant :

Résumé : Grâce à ces quatre étapes, vous pouvez compléter les paramètres de base et l'utilisation d'un lecteur. L'essentiel est de comprendre certaines des propriétés et des scénarios d'application du lecteur. Plus d'applications doivent être contrôlées via JS.