Heim >Web-Frontend >H5-Tutorial >Ausführliche Erklärung der neuen Multimedia-Tags in HTML5

Ausführliche Erklärung der neuen Multimedia-Tags in HTML5

藏色散人nach vorne: 2022-08-05 16:10:503355Durchsuche

Dieser Artikel stellt Ihnen die häufig verwendeten Multimedia-Tags in HTML und die neuen Multimedia-Tags in HTML5 vor. Ich hoffe, dass er Freunden in Not hilfreich sein wird!

HTML5 neue Multimedia-Tags

1: Video 39000f942b2545a5315c57fa3276f22039000f942b2545a5315c57fa3276f220

当前39000f942b2545a5315c57fa3276f220元素支持三种视频格式：尽量使用MP4格式

浏览器	MP4	WebM	Ogg
IE	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES 从Firefox21版本开始Linux系统从Firefox 30开始	YES	YES
Safari	YES	NO	NO
Opera	YES 从Opera25版本开始	YES	YES

<video controls="controls" autoplay="autoplay" muted="muted" width="500px" height="400px" loop="loop" poster="images/tudou.jpg" preload="none">
    <source src="medio/mov_bbb.mp4">
    <source src="medio/mov_bbb.ogg">
    您的浏览器暂不支持<video>标签播放视频</video>

视频39000f942b2545a5315c57fa3276f220——常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels（像素）	设置播放器宽度
height	pixels（像素）	播放器高度
loop	loop	循环播放
src	url	视频url地址
poster	imageurl	加载等待的话面图片
muted	muted	静音播放

二：音频b97864c2e0ef2353a16c4d64c7734e92

Das aktuelle 39000f942b2545a5315c57fa3276f220-Element unterstützt drei Videoformate: Versuchen Sie, das MP4-Format zu verwendenBrowserMP4WebMOggIEJANEINNEINChromeJA JAJAFirefox JA startet ab Firefox21-Version Linux-System ab Firefox 30JAJASafariJANEINNEINOperaJA ab Opera25-Version JAJA

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>HTML5音频标签</title></head><body>
   <audio controls="controls" autoplay="autoplay" muted="muted" loop="loop">
   <source src="medio/music.mp3" type="audio/mpeg">
   您的浏览器不支持audio元素</audio>
   </body>
   </html>

video39000f942b2545a5315c57fa3276f220 - gemeinsame AttributeEigenschaftWertBeschreibungAutoplayAutoplayVideo Bereit zum automatischen Abspielen (Google Chrome muss stummgeschaltet werden). Lösen Sie das Problem mit der automatischen Wiedergabe LoopURLBild-URLstummgeschaltet



Pixel (Pixel)	Spielerhöhe
Loop		src
Video-URL-Adresse		Poster
Lo Hinzufügen von Bildern wartender Wörter		stummgeschaltet

Stummschaltung

Zwei: Audio
Internet Explorer 9+
JA

Safari 5. +

JA🎜🎜J ES🎜🎜NEIN🎜🎜🎜🎜Oper 10+🎜 🎜JA🎜🎜JA🎜🎜JA🎜🎜🎜🎜rrreee🎜Google Chrome deaktiviert die automatische Wiedergabe von Audio und Video 🎜🎜🎜Autoplay🎜🎜Autoplay🎜🎜Autoplay🎜🎜🎜🎜 Steuerelemente🎜🎜Steuerelemente🎜🎜Dem Benutzer Wiedergabesteuerelemente anzeigen🎜🎜🎜🎜loop 🎜🎜loop🎜🎜loop play🎜🎜🎜🎜 src🎜🎜url🎜🎜Video-URL-Adresse🎜🎜🎜🎜stummgeschaltet 🎜🎜stummgeschaltet🎜🎜Stummschaltung🎜 🎜🎜🎜🎜🎜Multimedia-Tag-Zusammenfassung🎜🎜🎜🎜Die Verwendung von Audio-Tags und Video-Tags ist grundsätzlich gleich🎜 🎜Browser-Unterstützung variiert 🎜🎜Google Chrome deaktiviert die automatische Wiedergabe von Audio und Video🎜🎜Wir können das Attribut „stumm“ hinzufügen Video-Tag zum Stummschalten des Videos, Audio jedoch nicht (kann durch JavaScript gelöst werden)🎜🎜Das Video-Tag ist der entscheidende Punkt. Wir richten oft die automatische Wiedergabe ein, nicht anwendbar auf die Steuerung, Steuerung, Schleife und das Festlegen von Größenattributen🎜🎜🎜[Verwandt Empfehlungen: 🎜CSS-Video-Tutorial🎜]🎜

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der neuen Multimedia-Tags in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:jianshu.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Was ist die Doctype-Deklaration von HTML5?Nächster Artikel：Was ist die Doctype-Deklaration von HTML5?

In Verbindung stehende Artikel

Mehr sehen