Web ページ上では様々な形式の動画を再生することができ、Dreamweaver ではそれらの動画ファイルを簡単に配置することができます。ここでは例として、H.264 形式のファイル(.mp4)を HTML5 Video として配置する方法について説明します。

注意:

現時点では、HTML5 Video として再生可能なビデオ形式はブラウザーごとに異なります。詳細については HTML5 関連リファレンスなどの資料を参照してください。

サイトフォルダー内にビデオを保存

ここでは例として Adobe Premiere Pro または Adobe After Effects から書き出したビデオを利用します。ビデオの書き出し方法については、以下の文書を参照してください。

モバイルデバイスやストリーミングサイト用にムービーを書き出し(Premiere Pro)

After Effects のムービーを Web 用に書き出し

書き出したビデオを Dreamweaver のサイトフォルダー内にコピーしてください。video や movie などの専用フォルダーを作成しておくと便利です。

H.264 ビデオを Web ページに配置する

  1. Dreamweaver でサイト内の既存のページを開くか、または新規作成します。

  2. デザインビュー表示に切り替えます。

  3. 動画を挿入する箇所にカーソルを置き、挿入/HTML5 Video を選択します。

  4. ページ上に配置されたアイコンをクリックして選択します。

  5. プロパティパネルの「ソース」テキストボックスの右にある「ファイルの指定」アイコンを、ファイルパネルの動画アイコンにドラッグします。動画のパスが自動的に入力されます。

  6. 「W」(幅)と「H」(高さ)の値を入力します。

    注意:

    動画のサイズ(寸法)が分からない場合は、Adobe Bridge でファイルを選択すると確認できます。実サイズが大きい場合は、縦横の比率を維持して縮小するか、または After Effects や Premiere Pro から縮小した動画を再度書き出してください。

  7. 「Controls」にチェックを入れ、「AutoPlay」「Loop」「Muted」のチェックをはずします。

    注意:

    これらのオプションはそれぞれ以下のような再生機能を指定します。上記の設定は一例なので、用途に応じて自由に設定してください。

    • Controls : 再生ボタンや停止ボタンなどの再生コントロールを表示します。
    • AutoPlay : 動画を自動再生します。
    • Loop : 動画をループ再生します。
    • Muted : 動画の音声を無効にします。

  8. ライブビューに切り替えます。以下のように動画と再生コントロールが表示されます。

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

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