Dreamweaver CCでHTML5ビデオを挿入するのは とても簡単です index.htmlを使ってそれをやってみましょう これはエクササイズファイルのフォルダーの 「Chapter 8」フォルダー内にあります まず 真ん中までスクロールします ブログの投稿の下に カーソルを置きます 点滅しているこのカーソルの位置に HTML5ビデオを挿入します 挿入する方法は いろいろあります 「挿入」パネルからであれば 「挿入」パネルの「メディア」カテゴリに 「HTML5 Video」ボタンがあります このほかに「一般」セクションにも 同じ「HTML5 Video」オプションがあります さらに、この「HTML5 Video」は このように「挿入」メニューからも選択できます あるいは、このキーボードショートカットで 挿入することもできます いずれにしても、このコマンドを選択すると ビデオのプレースホルダが配置されます 「分割」ビューで確認すると video要素が追加されており それに、controls属性だけが 自動的に適用されています controls属性を適用したくないときは 「プロパティ」パネルで このオプションを選択解除します この「プロパティ」パネルにはビデオの すべてのオプションがまとまっているので 視覚的に作業できます 「ID」や「クラス」を このビデオオブジェクトに割り当てたい場合は ここから割り当てます しかし、まず設定すべきは 最も重要な属性であるSource属性でしょう この属性は再生する実際のビデオファイルの場所を指定します フォルダーアイコンをクリックしてください テキストフィールドの右にあるアイコンです 「ビデオの選択」ダイアログボックスが開きます 「html5-video」というフォルダーがあるのがわかるでしょう この中に3つのビデオフォーマットがあります 3つの異なるビデオフォーマットを用意しているのは どのブラウザーでも同じように再生できるようにするためです ここではこれから bentley.mp4を選択しますが .ogvファイルと.webmファイルもあります これらの名前は.mp4ファイルとまったく同じです ファイルを選択し、「開く」をクリックします 「開く」をクリックすると 「ソース」に値が設定されるだけでなく 「代替ソース1」と「代替ソース2」にも値が設定されます これは、拡張子とフォーマットが異なる 同名のファイルが存在するためです コードも適切にアップデートされます 欠けているものがありますね 幅と高さです 幅と高さがわからないときは 確認して入力しましょう もしあれば、ポスターフレームを使うこともできます ポスターフレームとは 再生されるビデオを表す画像です ポスターフレームはビデオと同じ寸法のはずです 今回は、あらかじめ作成しておいたポスターフレームがあります フォルダーアイコンをクリックしましょう テキストフィールドの右側のアイコンです 同じディレクトリに poster.pngがありますね これを選択します サイズは426 x 240ですね 「開く」をクリックすると 幅と高さがこれと同じサイズに設定されます ここに追加のオプションがいくつかあります 左下隅のここです 既に説明したControls属性がありますね ビデオのループもできます。
ビデオのループとは ビデオの再生を繰り返すことです 終わったら始めからまた再生します ビデオの自動再生も可能ですが 通常はあまりお勧めしません Webページでのビデオの自動再生は好まれません このオプションを選択する場合は 「Muted」オプションを選択することをお勧めします そうすることで、せめて音だけは出さないようにしましょう ビデオは再生されますが、それほど気にならないでしょう 何も聞こえませんからね 今回は両方とも選択解除しましょう 「Preload」メニューもあります 「none」がデフォルトですが、video要素には preload属性は何も割り当てられていませんね 「none」のpreload属性を割り当てたいときは いったんここで他のオプションを選択します その後でまた「none」を選択します 「none」を選択するとプリロードは行われません 普通はこれだとエクスペリエンスがよくなりません 少なくとも「metadata」を選択してください これを選択すると、再生時間やサイズなどがプリロードされます これならエンドユーザーがビデオの内容を 理解しやすくなります 「auto」を選択すると、コンテンツをプリロードするかどうかが ブラウザーによって制御されるようになります 今回は「metadata」を選択します これらはすべて基本的な属性です Flash フォールバック属性については、後で確認するとして その前に 「デザイン」ビューに戻り 「ライブ」ビューをクリックしましょう 「ライブ」ビューをクリックすると video要素がDreamweaver CC内で適切にレンダリングされるので それをプレビューできます この「再生」ボタンをクリックします ビデオがきちんと再生されています 是非、このページのテストを Firefox、Chrome、Internet Explorerで行って 期待どおりの結果になるか確認することをお勧めします ご覧のように、Dreamweaver CCの新機能を使えば HTML5 ビデオの挿入はとても簡単です
