Heim  >  Artikel  >  Web-Frontend  >  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

零下一度
零下一度Original
2017-05-15 13:29:511832Durchsuche

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>

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 d8e2720730be5ddc9c2a3782839e8eb6-Tag

d8e2720730be5ddc9c2a3782839e8eb6 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">

Problem

HTML4 erkennt das 6f58493253d0805dc517e3a8cb1dfbda-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 273238ce9338fbb04bee6997e5552b95-Tag

273238ce9338fbb04bee6997e5552b95

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

Beispiel

<object data="intro.swf" height="200" width="200"></object>

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 39000f942b2545a5315c57fa3276f220-Tag. Das

39000f942b2545a5315c57fa3276f220 Das ;-Element wird in allen modernen Browsern unterstützt.

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>

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

39000f942b2545a5315c57fa3276f220-Element ist in älteren Browsern nicht gültig.

Die beste HTML-Lösung

Das folgende Beispiel verwendet 4 verschiedene Videoformate. Das HTML 5-Element 39000f942b2545a5315c57fa3276f220 versucht, ein Video in einem der Formate mp4, ogg oder webm abzuspielen. Wenn beides fehlschlägt, greifen Sie auf das d8e2720730be5ddc9c2a3782839e8eb6-Element zurück.

HTML 5 + 273238ce9338fbb04bee6997e5552b95 + d8e2720730be5ddc9c2a3782839e8eb6

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>

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>
Hyperlink

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

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

实例

<a href="intro.swf">Play a video file</a>

关于内联视频的说明

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

如果您打算在 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!

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