HTML ビデオ (ビデオ)

HTML 動画

HTML で動画を再生するのは簡単ではありません。

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

この章では、PHP 中国語 Web サイト (php.cn) に問題と解決策がまとめられています。

<embed> タグを使用します

次の 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> タグは、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 ソリューション

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の新しいタグ

タグ	説明
HTML4 では非推奨ですが、HTML5 では許可されています。
埋め込みオブジェクトを定義します。
オブジェクトのパラメータを定義します。

<audio> <video>ソース <

はサウンドコンテンツを定義します
はビデオまたはビデオを定義します
のマルチメディアリソースを定義します。メディア要素 (<video> および <audio>)
<track> メディア要素の字幕ファイル、またはテキストを含む他のファイル (<video> および <audio>) を指定します;)

学び続ける

新しいファイル

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

提出するリセットコード

自動運転