Heim > Artikel > Web-Frontend > Ausführliche Erläuterung des HTML5-Video-Tags
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
<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.
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>
【相关推荐】