HTML-Grund教程

HTML Medien

HTML Referenzhandbuch

HTML5 Grund教程

HTML5 API

HTML5 Medien

HTML-Beispiel大全 HTML-Audio(Audio)

HTML-Video（Video）Wiedergabe

Es gibt viele Methoden, um Videos in HTML abzuspielen.

HTML-Videos (Videos)

Beispiel

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title Grund教程(oldtoolbag.com)</title>　
</head>
<body>
<video width="320" height="240" controls autoplay>
　　<source src="movie.ogg" type="video/ogg">
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.webm" type="video/webm">
　　<object data="movie.mp4" width="320" height="240">
　　　　<embed width="320" height="240" src="movie.swf">
　　</object>
</video>
</body>
</html>

Testen Sie es heraus ‹/›

Probleme und Lösungen

Es ist nicht einfach, Videos in HTML abzuspielen!

Sie müssen viele Techniken beherrschen, um sicherzustellen, dass Ihre Videodateien auf allen Browsern (Internet Explorer, Chrome, Firefox, Safari, Opera) und auf allen Hardwaren (PC, Mac, iPad, iPhone) wiedergegeben werden können.

In diesem Kapitel haben wir für Sie die Probleme und deren Lösungen zusammengefasst.

Verwendung des <embed>-Tags

Der <embed>-Tag dient zur Einbettung von Multimedia-Elementen in HTML-Seiten.

Die folgenden HTML-Codes zeigen die Einfügung eines Flash-Videos in die Webseite:

Online-Beispiel

Problem

HTML4 Problem
Der <embed>-Tag kann nicht erkannt werden. Ihre Seite kann nicht validiert werden.
Wenn der Browser Flash nicht unterstützt, kann das Video nicht abgespielt werden.
iPad und iPhone können keine Flash-Videos anzeigen.

Wenn der Browser Flash nicht unterstützt, wird das Video nicht abgespielt

Verwenden Sie das <object>-Tag

Das <object>-Tag dient dazu, Multimediaelemente in einer HTML-Seite einzubetten.

Beispiel

Unten ist ein Beispiel für ein eingebettetes Flash-Video in einer HTML-Seite:2<object data="bookmark.swf" height="200" width="/object>

Frage:

00"><
Wenn der Browser Flash nicht unterstützt, kann das Video nicht abgespielt werden.
iPad und iPhone können keine Flash-Videos anzeigen.

Wenn Sie das Video in andere Formate konvertieren, spielt es dennoch nicht in allen Browsern ab.5 verwendet HTML

HTML5 Das <video>-Element

Das <video>-Tag definiert ein Video oder ein Film.

Das <video>-Element wird in allen modernen Browsern unterstützt.4 Der folgende HTML-Code zeigt ein eingebettetes Video im ogg- oder mp

Online-Beispiel

Beispiel

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title Grund教程(oldtoolbag.com)</title>　
</head>
<body>
<video width="320" height="240" controls autoplay>
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
　　<source src="movie.webm" type="video/webm">
　　oder ein Video im webm-Format:
</video>
</body>
</html>

Testen Sie es heraus ‹/›

Frage:

Ihr Browser unterstützt das video-Attribut nicht.
Sie müssen das Video in viele verschiedene Formate konvertieren

Das <video>-Element funktioniert in alten Browsern nicht.

Im folgenden Beispiel wird die beste HTML-Lösung verwendet 4 zu spielen. HTML 5 Das <video>-Element versucht, das Video in verschiedenen Formaten mit mp4eines der Formate ogg oder webm auswählen, um das Video abzuspielen. Failschlägt dies, wird auf das <embed>-Element zurückgegriffen.

Beispiel

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title Grund教程(oldtoolbag.com)</title>　
</head>
<body>
<video width="320" height="240" controls autoplay>
　　<source src="movie.ogg" type="video/ogg">
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.webm" type="video/webm">
　　<object data="movie.mp4" width="320" height="240">
　　　　<embed width="320" height="240" src="movie.swf">
　　</object>
</video>
</body>
</html>

Testen Sie es heraus ‹/›

Frage:

Sie müssen das Video in viele verschiedene Formate konvertieren

Youku-Lösung

Die einfachste Methode, ein Video in HTML anzuzeigen, ist die Verwendung von Webseiten wie Youku.

Wenn Sie ein Video in einer Webseite abspielen möchten, können Sie das Video auf Webseiten wie Youku hochladen und den HTML-Code in Ihrer Webseite einfügen, um das Video abzuspielen.

Sie können den HTML-Code zum Einbetten finden, indem Sie die Teilen-Schaltfläche auf den meisten Video-Webseiten verwenden.

Beispiel

<embed　src='https://player.youku.com/player.php/sid/XNDQ0MTI1NzE1Mg==/v.swf'　allowFullScreen='true'　quality='high'　width='480'　height='400'　align='middle'　allowScriptAccess='always'　type='application/x-shockwave-flash'></embed>

Testen Sie es heraus ‹/›

Verwendung von Hyperlinks

Wenn eine Webseite Hyperlinks zu Mediendateien enthält, verwenden die meisten Browser ein "Zusatzprogramm", um Dateien abzuspielen.

Der folgende Code-Schnipsel zeigt einen Link zu einer AVI-Datei. Wenn der Benutzer auf den Link klickt, startet der Browser ein "Zusatzprogramm", wie z.B. Windows Media Player, um die AVI-Datei abzuspielen:

Online-Beispiel

<a href="bookmark.swf">Ein Videodatei abspielen</a>

Informationen zum Inline-Video

Wenn ein Video in einer Webseite enthalten ist, wird es als Inline-Video bezeichnet.

Wenn Sie beabsichtigen, Inline-Videos in einer Webanwendung zu verwenden, müssen Sie sich bewusst sein, dass viele Menschen Inline-Videos lästig finden.

Bitte beachten Sie auch, dass der Benutzer möglicherweise die Optionen für Inline-Videos im Browser deaktiviert hat.

Unser bester Rat ist es, sie nur dort zu verwenden, wo der Benutzer ein Inline-Video sehen möchte. Ein positives Beispiel ist, dass die Seite geöffnet und das Video abgespielt wird, wenn der Benutzer auf einen Link klickt, um das Video zu sehen.

HTML-Mediatags

Tag	Beschreibung
<embed>	Definiert ein eingebettetes Objekt. HTML4 In nicht empfohlen, HTML5 In erlaubt.
<object>	Definiert ein eingebettetes Objekt.
<param>	Definiert die Parameter des Objekts.
<audio>HTML5	Definiert den Toninhalt
<video>HTML5	Definiert ein Video oder ein Film
<source>HTML5	Definiert die Multimedia-Ressourcen des Media-Elements (<video> und <audio>)
<track>HTML5	Bestimmen Sie die Datei für die Untertitel des media-Elements oder andere Dateien, die Text enthalten (<video> und <audio>)

HTML-Beispiel大全 HTML-Audio(Audio)