HTML 動画
HTML で動画を再生するのは簡単ではありません。
ビデオ ファイルをすべてのブラウザ (Internet Explorer、Chrome、Firefox、Safari、Opera) およびすべてのハードウェア (PC、Mac、iPad、iPhone) で確実に再生できるようにするには、多くのコツを知る必要があります。
この章では、PHP 中国語 Web サイト (php.cn) に問題と解決策がまとめられています。
<embed> タグを使用します
<embed> タグは、HTML ページにマルチメディア要素を埋め込むために使用されます。
次の HTML コードは、Web ページに埋め込まれた Flash ビデオを表示します:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h2>播放视频</h2>
<embed src="Uploader.swf" width="200" height="200"><p>如果你无法看到该视频,那么可能你的电脑不支持该文件格式。</p>
</body>
</html>
swf 形式のビデオを見つけて実行してみてください
質問
HT ML4 が認識されません<埋め込み>タグ。ページは検証に合格できません。
- ブラウザがFlashをサポートしていない場合、ビデオは再生されません
- iPadおよびiPhoneではFlashビデオを表示できません。
- ビデオを他の形式に変換しても、すべてのブラウザで再生できるわけではありません。
<object> タグを使用します
<object> タグは、HTML ページにマルチメディア要素を埋め込むために使用されます。
次の HTML スニペットは、Web ページに埋め込まれた Flash ビデオを示しています:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h2>播放视频</h2>
<object height="200" width="200" data="Uploader.swf"></object>
</body>
</html>
問題:
ブラウザが Flash をサポートしていない場合、ビデオは再生されません。
iPadおよびiPhoneではFlashビデオを表示できません。
ビデオを他の形式に変換しても、すべてのブラウザで再生できるわけではありません。 HTML5 の <video> 要素は、最新のすべてのブラウザでサポートされています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h2>播放视频</h2>
<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">
您的浏览器不支持视频。
</video>
</body>
</html>
上の例でいくつかのビデオ形式を見つけて、プログラムを実行して試してください
質問:
「ビデオをさまざまな形式に変換」を追加する必要があります。
<video> 要素は古いブラウザでは無効です。
最高の HTML ソリューション 次の例では、4 つの異なるビデオ形式を使用しています。 HTML 5 の <video> 要素は、mp4、ogg、または webm 形式のいずれかでビデオを再生しようとします。どちらも失敗した場合は、<embed> 要素に戻ります。
HTML 5 + <object> + <embed>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h2>播放视频</h2>
<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>
上記の例でいくつかのビデオ形式を見つけて、プログラムを実行して試してください
問題:
変換する必要がありますビデオ さまざまな形式に対応
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>
例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h2>播放视频</h2>
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed>
</body>
</html>
プログラムを実行して試してください
ハイパーリンクを使用してください
Webページにメディアファイルへのハイパーリンクが含まれている場合は、ほとんどのブラウザは「ヘルパー アプリケーション」を使用してファイルを再生します。
次のコード スニペットは、AVI ファイルへのリンクを示しています。ユーザーがリンクをクリックすると、ブラウザーは Windows Media Player などの「ヘルパー アプリケーション」を起動して AVI ファイルを再生します。 Web ページにビデオが含まれている場合、それはインライン ビデオと呼ばれます。
Web アプリケーションでインライン ビデオを使用する予定がある場合は、多くの人がインライン ビデオを煩わしいと感じていることに注意する必要があります。
また、ユーザーがブラウザのインラインビデオオプションをオフにしている可能性があることにも注意してください。 私たちの最善のアドバイスは、ユーザーが視聴することを期待している場所にのみインラインビデオを含めることです。良い例としては、ユーザーがビデオを見る必要があり、リンクをクリックするとページが開き、ビデオが再生される場合が挙げられます。
HTMLマルチメディアタグ
HTML5の新しいタグ
<object> <param>| タグ | 説明 |
| HTML4 では非推奨ですが、HTML5 では許可されています。 | |
| 埋め込みオブジェクトを定義します。 | |
| オブジェクトのパラメータを定義します。 | |
<audio> <video>ソース < | はサウンドコンテンツを定義します | |
| はビデオまたはビデオを定義します | |
| のマルチメディア リソースを定義します。メディア要素 (<video> および <audio>) | |
<track>
メディア要素の字幕ファイル、またはテキストを含む他のファイル (<video> および <audio>) を指定します;) | |
