Maison >interface Web >Tutoriel H5 >Explication détaillée du code vidéo en HTML5

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

寻∝梦original: 2018-08-13 18:53:013616parcourir

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

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

a6a9c6d3f311dabb528ad355798dc27d

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5eL'é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">

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>

Balise vidéo HTML5

39000f942b2545a5315c57fa3276f220 définit une vidéo

e02da388656c3265154666b7c71a8ddc ;

9bf7cbf2c39baa37076a22499de2f6edDé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">

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

a6a9c6d3f311dabb528ad355798dc27d

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5eL'é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!

JavaScript html5 firefox chrome safari html 事件 dom

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：À quoi sert le canevas html5 ? Explication détaillée du dernier élément canevas en HTML5Article suivant：À quoi sert le canevas html5 ? Explication détaillée du dernier élément canevas en HTML5

Articles Liés

Voir plus