suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Einführung in HTML5-Multimedia-Audio und -Video (1)

Detaillierte Einführung in HTML5-Multimedia-Audio und -Video (1)

黄舟
黄舟Original
2017-05-19 16:57:312601Durchsuche

Normalerweise installieren Browser Flash, um Audio und Video auf Webseiten abzuspielen.
HTML5 fügt Audio- und Videoelemente für die Audio- und Videowiedergabe hinzu und verringert so die Abhängigkeit von Flash.

Audiounterstützung für Audio

HTML5 gibt eine Standardmethode zum Einbinden von Audio über das Audioelement an.
Derzeit unterstützt das Audioelement die folgenden drei Audioformate:

音频格式 IE9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis NO YES YES YES NO
MP3 YES NO NO YES YES
Wav NO YES YES NO YES

Videounterstützung für Video

HTML5 gibt eine Standardmethode an, um Video über das Videoelement einzubinden.
Derzeit unterstützt das Videoelement die folgenden drei Videoformate:

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

Audio- und Videowiedergabe, Audio- und Videobeispiele

<!Doctype html>
<html>
<head>
<title>HTML5多媒体</title>
<meta charset="utf-8"/>
</head>
<body>
    <p>
        <audio id="myAudio" controls="controls">
            <source src="resource/传奇.mp3" type="audio/mpeg">
            您的浏览器不支持audio        
            </audio>
    </p>

    <p>
        <video id="myVideo" controls="controls">
            <source src="resource/手语.mp4" type="video/mp4">
            您的浏览器不支持video        
            </video>
    </p>
    </body>
    </html>

Das Obige ist der einfachste Beispielcode für die Audiowiedergabe und Video, natürlich müssen Sie die MP3- und MP4-Ressourcendateien selbst finden ~
Das Folgende ist der laufende Effekt meines Beispielcodes, sowohl Audio als auch Video werden abgespielt!
Detaillierte Einführung in HTML5-Multimedia-Audio und -Video (1)

[Verwandte Empfehlungen]

1. Detaillierte Erläuterung der Video-Tag-Testanwendung von HTML5

2. html 5 Verwenden Sie das Videoelement, um einen Videoplayer zu erstellen

3. Teilen Sie das Problem und die Lösung eines Video-Tags, das keine MP4-Dateien abspielen kann

4. H5 Die Lösung für das Problem, dass das Video-Tag nur Ton, aber kein Video abspielen kann

5. Der MIME-Typ von IIS ist nicht als MP4-Typ registriert, was dazu führt, dass Unfähigkeit, das Vidoe-Tag zu erkennen

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in HTML5-Multimedia-Audio und -Video (1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Ausführliche Erklärung des HTML5-Canvas (6)Nächster Artikel：Ausführliche Erklärung des HTML5-Canvas (6)

In Verbindung stehende Artikel

Mehr sehen