Heim > Artikel > Web-Frontend > Ausführliche Erläuterung des HTML5-Video-Tags

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

黄舟Original: 2017-05-19 17:24:494486Durchsuche

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>

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>

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>

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>

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

【相关推荐】

1. 详解html5的video标签测试应用

2. html 5中使用video元素制作一个影片播放器

3. H5 video标签只能放声音不能放视频的解决办法

4. 分享一个video标签无法播放mp4的问题以及解决方案

5. IIS的MIME未注册MP4类型，导致无法识别vidoe标签的解决办法

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (13) – Globale Attribute in HTML5Nächster Artikel：Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (13) – Globale Attribute in HTML5

In Verbindung stehende Artikel

Mehr sehen