彼の最初のブログでは PC プロ 、 ウェブ開発者 イアン・デブリン HTML5 を使用して Web サイトにビデオを埋め込む方法を明らかにします
リーグ・オブ・レジェンドの言語を変更する方法
おそらく、HTML5 の最大かつ最も話題になっている機能は、埋め込みビデオです。現在、Web サイトにビデオ コンテンツを追加する唯一の方法は、Flash、QuickTime、RealPlayer などのサードパーティのプラグインを使用することです。 HTML5 の夜明けとビデオ要素により、これはすべて変わります。ビデオ サポートは Web ブラウザによって処理され、サードパーティのサポートは不要になります。
いくつかの Web ブラウザーは、すでに HTML5 のサポートを提供しています。ここでは、プラグインなしのビデオをサイトに埋め込む方法と、直面する問題を明らかにします。
ファイルの種類とブラウザの互換性
まず、HTML5 でサポートされているさまざまなビデオ ファイルの種類を簡単に見ていきます。これらは Theora OGG と H.264 (.mp4) です。さまざまなブラウザーがさまざまなタイプをサポートし、まったくサポートしないものもあります。次の表はこれを示しています。
| テオラ・オグ | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | バツ |
| クローム 3+ | ✓ | ✓ |
| サファリ 3+ | バツ | ✓ |
| オペラ 10.5+ | ✓ | バツ |
| インターネットエクスプローラー8 | バツ | バツ |
| インターネットエクスプローラー9 | バツ | ✓ |
| iPhone | バツ | ✓ |
| アンドロイド | バツ | ✓ |
コーデックおよびその他の技術的な問題
HTML5 自体は、使用するビデオ コーデックを指定していません。 ウェブに最適 。したがって、すべてのブラウザをカバーするには、両方のコーデックをサポートする必要があります。
そしてもちろん、Internet Explorer もあります。現時点では、リリースされたバージョンの Internet Explorer はいずれも video 要素をサポートしておらず、ビデオを再生するにはプラグインが必要です。これは、H.264 がサポートされる Internet Explorer 9 のリリース (おそらく来年初め) で変更され、他の多くの HTML5 機能もサポートされる予定です。
ビデオ ファイルを OGG に変換する方法を知りたい場合に備えて (Theora OGG タイプの詳細については、 テオラクックブック ) を使用するファイル ミロビデオコンバーター 。
ビデオ要素とコーデックの詳細については、 html5 の詳細: Web 上のビデオ マーク・ピルグリム著。
HTML5 コード
次に、実際の HTML5 コードと、それを機能させる方法に移ります。 HTML5 は、Web ページにビデオを追加するために使用できる 2 つの新しい要素を提供します: |_+_| です。すでに述べた要素、および |_+_|素子。それぞれについて順番に見ていきましょう。
要素
video 要素には、次の属性を含めることができます。
| 属性 | 説明 |
|---|---|
| ソース | ビデオ ファイル自体への有効な URL |
| 自動再生 | ビデオを自動的に再生するかどうかを示すブール値 |
| コントロール | デフォルトのメディア コントロールがブラウザによって表示されることを示すブール値 |
| ループ | ビデオを繰り返し再生する必要があるかどうかを示すブール値 |
| 予圧 | ビデオ自体のプリエンプティブ ダウンロードが必要かどうか、またはメタデータだけが必要かどうかをブラウザに示します。 可能な値は次のとおりです。
|
| ポスター | 動画データがない場合に表示する画像ファイルへのURL |
| 幅 | ビデオの幅 (CSS ピクセル単位) |
| 高さ | ビデオの高さ (CSS ピクセル単位) |
このことから、video 要素だけを使用して OGG ビデオを Web サイトに埋め込むのがいかに簡単であるかがわかります。
本当にそれだけです。
Theora OGG フォーマットをサポートするブラウザは、問題なくビデオを表示および再生できるようになりました。上記の表からわかるように、コードは Firefox、Chrome、および Opera でのみ機能するため、もちろん、それほど簡単ではありません。したがって、H.264 へのフォールバックも必要です。これは |_+_| を使用して達成できます。要素、ビデオ要素の複数のメディア ソースを定義できます。
Google ドキュメントで余分なページを削除する方法
要素
ソース要素には次の属性があります。
| 属性 | 説明 |
|---|---|
| ソース | メディア (この場合はビデオ) ファイル自体への有効な URL |
| タイプ | である必要があるメディア ファイルのタイプ MIMEタイプ 、例： |_+_| Theora OGG ビデオであることを示します。また、|_+_| を使用して、ブラウザがビデオの再生方法を決定するのに役立つ MIME コーデックを提供することもできます。 |
| ハーフ | メディア リソースの目的のメディア タイプを指定し、有効な メディアクエリ 、例： |_+_|ビデオがハンドヘルド デバイスまたは |_+_| に適していることを示します。これは、ビデオが 720 ピクセル以上の画面に適していることを示しています。 |
注: ソース要素は無効であり、開始タグはありますが、終了タグはありません。
ソース要素の最も便利な点は、さまざまなファイル タイプをスタックするために使用できることです。これにより、ブラウザは再生できるものが見つかるまで、それぞれを順番に試すことができます。
一緒に使う
ビデオ要素内のさまざまなタイプのビデオをスタックするには、次のようにコードを入力します。
上記のコードは、Internet Explorer を除くすべてのブラウザで機能します。Internet Explorer では、上記のメッセージが表示されます。
HTML5 テスト ビデオ ページ を表示して、これを自分でテストできます。このページには、Theora OGG と MP4 形式の両方の蝶のサンプル ビデオが含まれています。Firefox、Chrome、Safari、Opera、または iPhone またはAndroid ハンドセット、表示できるはずです。
鋭利なナイフをお持ちの方は、次のコードを使用して、このスタッキングを利用して、このビデオ メッセージを表示する代わりに、下部に Flash (または他のプラグイン) へのフォールバックを設定できることに気付くでしょう。 :
結論
ほとんどの HTML5 要素と同様に、source 要素と video 要素のブラウザー サポートは現在、不完全です。現在、ソース要素が、Web サイトにビデオ コンテンツを追加する最も一般的な方法としての Flash の使用を止めるかどうかについても大きな議論が行われています。これが Flash を完全に殺すかどうかはわかりませんが、それでも、Flash が存続し、Web 開発者にビデオを埋め込むためのよりクリーンで簡単なアプローチを提供すると言っても差し支えないでしょう。
