Web ページに HTML5 ビデオを挿入し、ブラウザーでビデオをプレビューする方法について説明します。

Dreamweaver を使用して、Web ページに HTML5 ビデオを挿入することができます。

HTML5 video 要素は、Web ページにムービーまたはビデオを埋め込むための標準的な方法を提供します。

HTML video 要素について詳しくは、W3schools.comHTML5 ビデオ(英語)を参照してください。

HTML5 ビデオの挿入

  1. ビデオを挿入する位置にカーソルがあることを確認します。

  2. 挿入HTMLHTML5 ビデオを選択します。HTML5 video 要素が指定した場所に挿入されます。

  3. プロパティパネルで、様々なオプションの値を指定できます。

    ソース / 代替ソース 1 / 代替ソース 2:「ソース」にビデオファイルの場所を入力します。または、フォルダーアイコンをクリックして、ローカルファイルシステムからビデオファイルを選択します。サポートされるビデオ形式は、ブラウザーによって異なります。「ソース」のビデオ形式がブラウザーでサポートされていない場合、「代替ソース 1」または「代替ソース 2」で指定したビデオ形式が使用されます。ブラウザーは最初に認識した形式を選択して、ビデオを表示します。

    HTML5 ビデオのプロパティの指定
    HTML5 ビデオのプロパティの指定

    注意:

    複数選択を使用して、ビデオを 3 つのフィールドに簡単に追加できます。同じビデオに対してフォルダーから 3 つのビデオフォーマットを選択すると、リストの最初のフォーマットが「ソース」に使用されます。リストの次のフォーマットは「代替ソース 1」および「代替ソース 2」の自動入力に使用されます。

    ブラウザーとサポートされているビデオ形式について詳しくは、以下の表を参照してください。最新の情報については、HTML5 - ブラウザーサポートを参照してください。

    ブラウザー MP4 WebM Ogg
    Internet Explorer 9 はい いいえ いいえ
    Firefox 4.0 いいえ はい はい
    Google Chrome 6 はい はい はい
    Apple Safari 5 はい いいえ いいえ
    Opera 10.6 いいえ はい はい
    • タイトル:ビデオのタイトルを指定します。
    • 幅(W):ビデオの幅をピクセルで入力します。
    • 高さ(H):ビデオの高さをピクセルで入力します。
    • コントロール:HTML ページで再生、一時停止、ミュートなどのビデオコントロールを表示する場合に選択します。
    • 自動再生:Web ページにビデオが読み込まれたらすぐに再生を開始する場合に選択します。
    • ポスター:ビデオのダウンロードが完了するか、ユーザーが「再生」をクリックするまでの間表示する画像の場所を入力します。イメージを挿入すると、「幅」と「高さ」の値が自動的に設定されます。
    • ループ:ユーザーがムービーの再生を停止するまで、続けてビデオを再生する場合にこのオプションを選択します。
    • ミュート:ビデオのオーディオ部分をミュートする場合にこのオプションを選択します。
    • Flash Video:HTML 5 ビデオをサポートしていないブラウザー用の SWF ファイルを選択します。
    • 代替テキスト:ブラウザーが HTML5 をサポートしていない場合に表示するテキストを指定します。
    • プリロード:ページのロード時にビデオをどのようにロードするかについてオーサリング環境の設定を指定します。「自動」を選択すると、ページのダウンロード時にビデオ全体がロードされます。「メタデータ」を選択すると、ページのダウンロードが完了してから、メタデータのみがダウンロードされます。

ブラウザーでのビデオのプレビュー

  1. Web ページを保存します。

  2. ファイルリアルタイムプレビュー. ビデオをプレビューするブラウザーを選択します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー