Heim Web-Frontend HTML-Tutorial Ausführliche Erläuterung von Beispielen für die Videowiedergabe beim Teilen von HTML

Ausführliche Erläuterung von Beispielen für die Videowiedergabe beim Teilen von HTML

May 15, 2017 pm 01:29 PM

Es gibt viele Möglichkeiten, Videos in HTML abzuspielen.

HTML-Video (Videos)-Wiedergabe

Instanzen

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object> 
</video>
Nach dem Login kopieren
Nach dem Login kopieren

Probleme und Lösungen

Das Abspielen von Videos in HTML ist nicht einfach!

Sie müssen viele Tricks kennen, um sicherzustellen, dass Ihre Videodateien in allen Browsern (Internet Explorer, Chrome, Firefox, Safari, Opera) und auf jeder Hardware (PC, Mac, iPad, iPhone) abgespielt werden .

In diesem Kapitel fasst W3CSchool die Probleme und Lösungen für Sie zusammen.

Verwenden Sie das -Tag

Das Tag wird verwendet, um das Multimedia-Element in die HTML-Seite einzubetten.

Der folgende HTML-Code zeigt ein in eine Webseite eingebettetes Flash-Video an:

Beispiel

<embed src="intro.swf" height="200" width="200">
Nach dem Login kopieren

Problem

HTML4 erkennt das < Einbetten>-Tag. Ihre Seite kann die Überprüfung nicht bestehen.

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

iPad und iPhone können keine Flash-Videos anzeigen.

Wenn Sie das Video in andere Formate konvertieren, wird es immer noch nicht in allen Browsern abgespielt.

Verwenden Sie das -Tag

Das folgende HTML-Snippet zeigt ein Flash-Video, das in eine Webseite eingebettet ist:

Beispiel

<object data="intro.swf" height="200" width="200"></object>
Nach dem Login kopieren

Problem:

Wenn der Browser dies nicht unterstützt Flash, das Video kann nicht abgespielt werden.

iPad und iPhone können keine Flash-Videos anzeigen.

Wenn Sie das Video in andere Formate konvertieren, wird es immer noch nicht in allen Browsern abgespielt.

Verwenden Sie das HTML5

Das folgende HTML-Snippet zeigt ein Video im ogg-, mp4- oder webm-Format an, das in eine Webseite eingebettet ist:

Beispiel

Frage:
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
Nach dem Login kopieren

Sie müssen Videos in viele verschiedene Formate konvertieren. Das

Die beste HTML-Lösung

Das folgende Beispiel verwendet 4 verschiedene Videoformate. Das HTML 5-Element

HTML 5 + +

Problem:
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object> 
</video>
Nach dem Login kopieren
Nach dem Login kopieren

Sie müssen das Video in viele verschiedene Formate konvertieren

Youku-Lösung

Der einfachste Weg, Videos in HTML anzuzeigen, ist die Verwendung einer Video-Website wie Youku.

Wenn Sie ein Video auf einer Webseite abspielen möchten, können Sie das Video

auf eine Video-Website wie Youku hochladen und dann den HTML-Code in Ihre Webseite einfügen, um es abzuspielen Video:

Verwenden Sie
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed>
Nach dem Login kopieren
Hyperlink

如果网页包含指向媒体文件的超链接,大多数浏览器会使用"辅助应用程序"来播放文件。

以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接,浏览器会启动"辅助应用程序",比如 Windows Media Player 来播放这个 AVI 文件:

实例

关于内联视频的说明

当视频被包含在网页中时,它被称为内联视频。

如果您打算在 web 应用程序中使用内联视频,您需要意识到很多人都觉得内联视频令人恼火。

同时请注意,用户可能已经关闭了浏览器中的内联视频选项。

我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是,在用户需要看到视频并点击某个链接时,会打开页面然后播放视频。

【相关推荐】

1. 特别推荐“php程序员工具箱”V0.1版本下载

2. 免费html在线视频教程

3. php.cn原创html5视频教程

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für die Videowiedergabe beim Teilen von HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Verschachtelte Tabelle 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.

Tabellenrahmen in HTML 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.

HTML-Rand links 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 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 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

Text in HTML verschieben 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.

Wie analysiert und verarbeitet man HTML/XML in PHP? Wie analysiert und verarbeitet man HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

Dieses Tutorial zeigt, wie XML -Dokumente mit PHP effizient verarbeitet werden. XML (Extensible Markup-Sprache) ist eine vielseitige textbasierte Markup-Sprache, die sowohl für die Lesbarkeit des Menschen als auch für die Analyse von Maschinen entwickelt wurde. Es wird üblicherweise für die Datenspeicherung ein verwendet und wird häufig verwendet

HTML-Eingabeplatzhalter 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.

See all articles