Explication détaillée du code vidéo en HTML5-Tutoriel H5-php.cn

Explication détaillée du code vidéo en HTML5

寻∝梦

Libérer： 2018-08-13 18:53:01

original

3634 Les gens l'ont consulté

Cet article parle principalement de certains chapitres de HTML5Video, qui sont plus adaptés aux novices pour apprendre quelques choses sur HTML5. Essayons la structure de cet élément.

Vidéo HTML5

De nombreux sites utilisent des vidéos HTML5 fournit une norme pour l'affichage des vidéos.

Vidéos sur les sites Web

Jusqu'à présent, il n'existait aucune norme pour afficher des vidéos sur les pages Web.

Aujourd'hui, la plupart des vidéos sont affichées via des plug-ins (tels que Flash). Cependant, tous les navigateurs ne disposent pas des mêmes plugins.

HTML5 spécifie une manière standard d'inclure une vidéo via l'élément vidéo.

Prise en charge des navigateurs

Internet Explorer 9+, Firefox, Opera, Chrome et Safari prennent en charge l'élément.

Remarque : Internet Explorer 8 ou les versions antérieures d'IE ne sont pas des éléments pris en charge .

HTML5 (Vidéo) - Comment ça marche

Pour afficher la vidéo en HTML5, tout ce dont vous avez besoin est :

<!DOCTYPE html>
<html>
<head>
<title>PHP中文网</title>
</head>
<body>
<video width="320" height="240" controls>
  <source src="/statics/demosource/movie.mp4" type="video/mp4">
  <source src="/statics/demosource/movie.ogg" type="video/ogg">

Copier après la connexion

Votre navigateur ne prend pas en charge les étiquettes vidéo HTML5.

L'élément

fournit des commandes de lecture, de pause et de volume pour contrôler vidéo.

En même temps, l'élément element fournit également des attributs de largeur et de hauteur pour contrôler la taille de la vidéo. Si la hauteur et la largeur sont définies, l'espace vidéo requis sera réservé lors du chargement de la page. . Si ces propriétés ne sont pas définies et que le navigateur ne connaît pas la taille de la vidéo, le navigateur ne pourra pas réserver un espace spécifique lors du chargement et la page changera en fonction de la taille de la vidéo originale. Le contenu inséré entre

et les balises est prévu pour être affiché par les navigateurs qui ne prennent pas en charge l'élément vidéo. L'élément

prend en charge plusieurs éléments. Les éléments peuvent lier différents fichiers vidéo. Le navigateur utilisera le premier format reconnu :

HTML5 - Contrôle utilisant le DOM Le

HTML5 et les éléments ont également des méthodes, des propriétés et des événements. Les méthodes, propriétés et événements de

et des éléments peuvent être contrôlés à l'aide de JavaScript. Les méthodes de

sont utilisées pour lire, mettre en pause, charger, etc. Les propriétés (telles que la durée, le volume, etc.) peuvent être lues ou définies. Les événements DOM peuvent vous avertir, par exemple, lorsqu'un élément commence à jouer, est mis en pause, s'est arrêté, etc.

La méthode simple de l'exemple nous montre comment utiliser l'élément, lire et définir les attributs, et comment appeler des méthodes.

<!DOCTYPE html> 
<html> 
<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="/statics/demosource/mov_bbb.mp4" type="video/mp4">
    <source src="/statics/demosource/mov_bbb.ogg" type="video/ogg">

Copier après la connexion

Votre navigateur ne prend pas en charge la balise vidéo HTML5.

</video>
</div> 
<script> 
var myVideo=document.getElementById("video1"); 
function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 
function makeBig()
{ 
myVideo.width=560; 
} 
function makeSmall()
{ 
myVideo.width=320; 
} 
function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 
</body> 
</html>

Copier après la connexion

Balise vidéo HTML5

;

Défini dans la piste de texte du lecteur multimédia

HTML5 (Vidéo) - Comment ça marche

Pour afficher une vidéo en HTML5, tout ce dont vous avez besoin est :

<!DOCTYPE html>
<html>
<head>
<title>PHP中文网</title>
</head>
<body>
<video width="320" height="240" controls>
  <source src="/statics/demosource/movie.mp4" type="video/mp4">
  <source src="/statics/demosource/movie.ogg" type="video/ogg">

Copier après la connexion

Votre navigateur ne prend pas en charge la balise vidéo HTML5.

L'élément

fournit des commandes de lecture, de pause et de volume pour contrôler vidéo.

et les balises est prévu pour être affiché par les navigateurs qui ne prennent pas en charge l'élément vidéo.

[Recommandations associées]

Éléments de base du HTML, vous permettant d'apprendre le HTML à partir de zéro

HTML5 utilisation de l'élément vidéo

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!