Vidéo HTML5 (vi...LOGIN

Vidéo HTML5 (vidéo)

De nombreux sites utilisent des vidéos. HTML5 fournit un standard pour l'affichage des vidéos.

Vidéos sur les sites Web

Jusqu'à présent, il n'existait aucune norme pour l'affichage de 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 du navigateur

8.jpg


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

Remarque : Internet Explorer 8 ou les versions antérieures d'IE Le < ;video> n’est pas pris en charge.


HTML5 (Vidéo) - Comment ça marche

Pour afficher une vidéo en HTML5, il vous suffit de :

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
</video>
</body>
</html>

Exécutez et essayez-le


L'élément <video> fournit des commandes de lecture, de pause et de volume pour contrôler la vidéo.

En même temps, l'élément <video> 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é lorsque la page est affichée. chargé. . 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 les balises

<video> et </video> est fourni pour être affiché par les navigateurs qui ne prennent pas en charge l'élément vidéo.

L'élément

<video> prend en charge plusieurs éléments <source> Le navigateur utilisera le premier format reconnu :


Formats vidéo pris en charge par le navigateur

Actuellement, le <video> ; l'élément prend en charge trois formats vidéo : MP4, WebM et Ogg :

  • MP4 = fichier MPEG 4 avec encodage vidéo H.264 et encodage audio AAC

  • WebM = fichier WebM avec encodage vidéo VP8 et encodage audio Vorbis

  • Ogg = fichier Ogg avec encodage vidéo Theora et encodage audio Vorbis

   浏览器   MP4   WebM   Ogg
Internet Explorer   YES   NO   NO
Chrome   YES   YES   YES
Firefox   YES   YES   YES
Safari   YES   NO   NO
OperaYES (从 Opera 25 起)   YES   YES

视频格式

< td width="193" valign="top" style="border-width : 1px; border-style : solid; word-break : break-all;">   
    格式    MIME-type
    MP4   video/mp4
    WebM   video/webm
    Ogg   video/ogg
格式<🎜><🎜> <🎜> Type MIME<🎜><🎜>    MP4   video/mp4    WebM   video/webm    Ogg   video/ogg

Les éléments HTML5 <video> - contrôlés à l'aide du DOM

Les éléments HTML5 <video> , propriétés et événements. Les méthodes, propriétés et événements des éléments

<video> et <audio> peuvent être contrôlés à l'aide de JavaScript

Les méthodes incluent la lecture, la pause et le chargement. 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 que, par exemple, la lecture de l'élément <video> a été mise en pause, arrêtée, etc.

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

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<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="videol" width="420">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
</video>
</div>
<script>
    var myVideo=document.getElementById("videol");
    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>

Essayez de l'exécuter


Pour plus de référence, veuillez consulter le manuel de référence HTML5 Audio/Video DOM.



Balises vidéo HTML5


     标签     描述
   <video>定义一个视频
   <source>定义多种媒体资源,比如 <video> 和<audio>
   <track>定义在媒体播放器文本轨迹
tag


Description<🎜><🎜>
<video>Définir une vidéo
<source>Définissez plusieurs ressources multimédias, telles que <video> et <audio>
<track> défini dans le média Piste de texte du joueur
<🎜><🎜><🎜>section suivante
<!DOCTYPE html> <html> <head>  <meta charset="UTF-8"> <title>php中文网(php.cn)</title>  </head> <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="videol" width="420"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 HTML5 video 标签。 </video> </div> <script> var myVideo=document.getElementById("videol"); 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>
soumettreRéinitialiser le code
chapitredidacticiel