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>
【相关推荐】
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1371
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
