Ausführliche Erläuterung des HTML5-Video-Tags-H5-Tutorial-php.cn

Ausführliche Erläuterung des HTML5-Video-Tags

黄舟

Freigeben： 2017-05-19 17:24:49

Original

4468 Leute haben es durchsucht

Im vorherigen Artikel Xiaoqiangs mobiler HTML5-Entwicklungsweg (5) – Einen schönen Videoplayer erstellen, habe ich einige Freunde nicht viel über die Prinzipien informiert ausführliche Analyse der Verwendung des

1. Verwendungsfähigkeiten

In HTML5 können Sie den Tag

<video src="move.mp4"></video>

Nach dem Login kopieren

Video-Tag Es enthält viele Attribute, z. B. das Steuerattribut, mit dem gesteuert werden kann, ob eine Konsole vorhanden ist.

<video src="move.mp4" controls="controls">  
    浏览器不支持HTML5的视频播放功能  
</video>

Nach dem Login kopieren

Aus den oben genannten Videoformaten können wir ersehen, dass verschiedene Browser unterschiedliche Videoformate unterstützen, sodass wir das -Tag verwenden können, um Videos in mehreren Formaten anzugeben. Standardmäßig lädt der Browser die Datei herunter beginnt automatisch mit der Bestimmung seines Typs.

<video width="400" controls="controls">  
    <source src="move.mp4"  type="video/mp4" />  
    <source src="move.ogg"  type="video/ogg" />  
</video>

Nach dem Login kopieren

2. Attribute des Video-Tags

Das Video-Tag unterstützt globale Attribute und Ereignisattribute in HTML5

Die eindeutigen Attribute sind wie folgt:

Attribute Werte Beschreibung

Autoplay Autoplay Wenn dieses Attribut vorhanden ist, wird das Video abgespielt, sobald es fertig ist.

Steuerelemente Steuerelemente Wenn dieses Attribut angezeigt wird, zeigt es dem Benutzer das Steuerelement an, z. B. die Wiedergabetaste.

Höhe Pixel Legen Sie die Höhe des Videoplayers fest.

LOOP LOOP Wenn dieses Attribut erscheint, wird die Wiedergabe erneut gestartet, nachdem die Mediendatei abgespielt wurde.

Preload Preload

Wenn dieses Attribut angezeigt wird, wird das Video beim Laden der Seite geladen und kann abgespielt werden.

Dieses Attribut wird ignoriert, wenn „Autoplay“ verwendet wird.

src url Die URL des abzuspielenden Videos.

Breite Pixel Legen Sie die Breite des Videoplayers fest.

Von den meisten Browsern unterstützte Videomethoden und Attributereignisse

pause() currentTime pause

load() videoWidth progress

canPlayType videoHeight-Fehler

Dauer Zeitaktualisierung

beendet beendet

Fehlerabbruch

🎜>

volume loadedmetadata

height

width

注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

三、从实例中了解Video标签的使用

<!DOCTYPE html>   
<html>   
<body>   
    <p style="text-align:center;">  
      <!--定义按钮，并添加事件监听函数-->  
      <button onclick="playPause()">播放/暂停</button>   
      <button onclick="makeBig()">大</button>  
      <button onclick="makeNormal()">中</button>  
      <button onclick="makeSmall()">小</button>  
      <br />   
      <video id="video1" width="420" style="margin-top:15px;">  
        <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />  
          <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />  
          <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />  
          <p>您的浏览器不支持此HTML5标签</p>  
      </video>  
    </p>   
  
    <script type="text/javascript">  
        //得到video标签对象  
        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>

Nach dem Login kopieren

Ausführliche Erläuterung des HTML5-Video-Tags