動画タグ_html/css_WEB-ITnose

video

video タグを使用すると、最近あまり普及していない Flash を放棄し、ページ上で直接ビデオ ファイルを再生できます。ビデオ ファイルは当然最もセマンティックなファイル形式ですが、この要素タグはオーディオと画像もサポートします。

以前 (そして現在)、ページにビデオを配置するには、通常、次のような面倒で醜いコードを使用する必要がありましたが、この方法ではブラウザに Flash プラグインをインストールし、JavaScript をサポートする必要があります:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="425" height="344"  src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"></embed></object>

HTML5メソッド:

video タグには次の共通属性があります:

Autoplay: ページが読み込まれた後にビデオを自動的に再生するかどうかを設定するために使用されます。
Src: ブラウザが video タグをサポートしていない場合、または再生エラーが発生した場合に、ビデオのファイル リンクまたはダウンロード パスを指定して、ダウンロード用にユーザーに提供できます。
自動バッファ: ビデオを自動的にバッファリングするかどうかを設定するために使用されます。設定されている場合、ユーザーが再生ボタンをクリックすると、ビデオの少なくとも一部が待たずに直接視聴できます。 。
ポスター: ビデオの「フォトフレームのデフォルト画像」の背景画像を設定するために使用されます。ビデオを正常にロードして再生できない場合にユーザーに表示できます。
コントロール: 「再生」、「一時停止」などのコントロール バーをビデオに追加するかどうかを設定するために使用されます。コントロール バーの外観はカスタマイズできます。
ループ: ビデオをループ再生するかどうかを設定するために使用されます。
幅、高さ: ビデオの幅と高さを制御するために使用されます。
video 要素は多くの注目を集め、大きな可能性を秘めていますが、主流のブラウザーで完全にサポートされるまでにはまだ時間がかかります。現時点では、video タグを使用する必要がある場合は、次のような平凡なコードの組み合わせを使用できます。以下:

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer><p>Try this page in Safari  4! Or you can<a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a>instead.</p></video>

HTML5 学習メモの簡潔版 (4): video、audio、meter、datalist、keygen、output の新しい要素

HTML video タグ

HO8001: OBJECT 要素と EMBED の使用に違いがありますさまざまなブラウザに Flash を埋め込むための要素