HTML共有での動画再生例を詳しく解説

HTML でビデオを再生する方法はたくさんあります。

HTML ビデオ (ビデオ) の再生

インスタンス

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

問題と解決策

HTML でビデオを再生するのは簡単ではありません。

ビデオ ファイルをすべてのブラウザ (Internet Explorer、Chrome、Firefox、Safari、Opera) およびすべてのハードウェア (PC、Mac、iPad、iPhone) で確実に再生できるようにするには、多くのテクニックを知る必要があります。

この章では、W3CSchool が問題と解決策をまとめています。

d8e2720730be5ddc9c2a3782839e8eb6 タグを使用します

d8e2720730be5ddc9c2a3782839e8eb6 タグは、HTML ページに multimedia 要素を埋め込むために使用されます。

次の HTML コードは、Web ページに埋め込まれた Flash ビデオを表示します。

例

<embed src="intro.swf" height="200" width="200">

問題

HTML4 は d8e2720730be5ddc9c2a3782839e8eb6 タグを認識しません。ページは検証に合格できません。

ブラウザがFlashをサポートしていない場合、ビデオは再生されません

iPadおよびiPhoneではFlashビデオを表示できません。

ビデオを他の形式に変換しても、すべてのブラウザで再生できるわけではありません。

273238ce9338fbb04bee6997e5552b95 タグを使用します

273238ce9338fbb04bee6997e5552b95 タグは、HTML ページにマルチメディア要素を埋め込むために使用されます。

次の HTML スニペットは、Web ページに埋め込まれた Flash ビデオを示しています:

例

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

問題:

ブラウザが Flash をサポートしていない場合、ビデオは再生されません。

iPadおよびiPhoneではFlashビデオを表示できません。

ビデオを他の形式に変換しても、すべてのブラウザで再生できるわけではありません。

39000f942b2545a5315c57fa3276f220 要素の使用 39000f942b2545a5315c57fa3276f220 要素は、最新のブラウザでサポートされています。

次の HTML スニペットは、Web ページに埋め込まれた ogg、mp4、または webm 形式のビデオを表示します:

例

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

問題:

ビデオをさまざまな形式に変換する必要があります。

39000f942b2545a5315c57fa3276f220 要素は古いブラウザでは無効です。

最適な HTML ソリューション

次の例では 4 つの異なるビデオ形式が使用されています。 HTML 5 の 39000f942b2545a5315c57fa3276f220 要素は、mp4、ogg、または webm 形式のいずれかでビデオを再生しようとします。どちらも失敗した場合は、d8e2720730be5ddc9c2a3782839e8eb6 要素に戻ります。

HTML 5 + 273238ce9338fbb04bee6997e5552b95 + d8e2720730be5ddc9c2a3782839e8eb6

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

問題:

ビデオをさまざまな形式に変換する必要があります

Youku の解決策

HTML でビデオを表示する最も簡単な方法は Youku を使用することですおよびその他のビデオ Web サイト。

Web ページでビデオを再生したい場合は、ビデオ

を Youku などのビデオ Web サイトにアップロードし、Web ページに HTML コードを挿入してビデオを再生できます:

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

ハイパーリンクを使用します。

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

以下代码片段显示指向 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视频教程

以上がHTML共有での動画再生例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。