Dreamweaver での ビデオの追加

HTML5 には、外部のプラグインやプレーヤーを使わずにブラウザー上でビデオやオーディオファイルを再生する video タグと audio タグがあります。Dreamweaver では、video タグと audio タグのコードヒントをサポートしています。

ライブビューにはビデオも表示されるので、Web ページに埋め込んだビデオがどのように見えるかを確認できます。

HTML5 ビデオの挿入方法について詳しくは、Dreamweaver での HTML5 ビデオの挿入を参照してください。

FLV ファイルの挿入

FLV ファイルの挿入

Web ページに FLV ビデオを挿入する操作は、Flash オーサリングツールを使用することなく簡単に実行できます。ただし、エンコード済みの FLV ファイルを用意する必要があります。

Dreamweaver は、FLV ファイルを表示する SWF コンポーネントをページに挿入します。ブラウザーに表示すると、このコンポーネントにより、選択した FLV ファイルが再生コントロール一式と共に表示されます。

Dreamweaver には、サイトビジターに Flash Video を配信する方法として次のオプションがあります。

サイトビジターのハードディスクに FLV ファイルをダウンロードして再生します。ただし、ビデオ配信の従来の "ダウンロード再生" 方式と異なり、プログレッシブダウンロードの場合は、ダウンロードが完了する前にビデオファイルの再生を開始できます。

再生をスムーズにするために短時間のバッファー処理を実行した後、ビデオコンテンツをストリーミングして Web ページ上で再生します。Web ページ上でのストリーミングビデオ再生を可能にするには、Adobe® Flash® Media Server を使用する必要があります。

Dreamweaver で使用する前に、あらかじめエンコードされた FLV ファイルを用意する必要があります。Sorenson Squeeze または On2 いずれかのコーデック（圧縮/圧縮解除テクノロジ）で作成したビデオファイルを挿入できます。

FLV ファイルを挿入すると、他の SWF ファイルの場合と同じように、そのビデオを再生できる適切なバージョンの Flash Player をユーザーが使用しているかどうかを検出するコードが Dreamweaver によって挿入されます。バージョンが適切でない場合は、Flash Player 最新バージョンのダウンロードを促す代替コンテンツがページ上に表示されます。

ビデオの取り扱いについて詳しくは、ビデオテクノロジーセンター（www.adobe.com/go/flv_devcenter_jp）を参照してください。

FLV ファイルの挿入

プログレッシブダウンロードビデオのオプションの設定

FLV の挿入ダイアログボックスで、Web ページに挿入された FLV ファイルのプログレッシブダウンロード配信に関するオプションを設定できます。

ストリーミングビデオのオプションの設定

FLV の挿入ダイアログボックスで、Web ページに挿入された FLV ファイルのストリーミングビデオダウンロードに関するオプションを設定できます。

Flash Player ダウンロード情報の編集

ページに FLV ファイルを挿入すると、Dreamweaver により、ユーザーが適切なバージョンの Flash Player を使用しているかどうかを検出するコードが挿入されます。Flash Player のバージョンが適切でない場合、初期設定では、最新バージョンのダウンロードを促す代替コンテンツがページ上に表示されます。この代替コンテンツはいつでも変更できます。

同様の処理は SWF ファイルにも適用されます。

FLV ファイルのトラブルシューティング

この節では、FLV ファイルに関する問題における、いくつかの一般的な原因について説明します。

存在しない関連ファイルによる表示の問題

Dreamweaver CS4 以降が生成するコードは、FLV ファイル自体ではなく 4 つの依存ファイルに依存します。

• swfobject_modified.js

• expressInstall.swf

• FLVPlayer_Progressive.swf

• スキンファイル（Clear_Skin_1.swf など）

Dreamweaver CS4 以降では、Dreamweaver CS3 に比べて依存ファイルが 2 つ増えています。

このうち、最初の 2 つのファイル（swfobject_modified.js と expressInstall.swf）は Scripts というフォルダーにインストールされます。このフォルダーが存在しない場合、Dreamweaver によってサイトのルートに作成されます。

次の 2 つのファイル（FLVPlayer_Progressive.swf とスキンファイル）は、FLV が埋め込まれているページと同じフォルダーにインストールされます。スキンファイルには FLV のコントロールが含まれます。このファイルの名前は、Dreamweaver CS4 ヘルプで説明するオプションで選択されたスキンに依存します。例えば、「Clear Skin」を選択した場合、ファイル名は Clear_Skin_1.swf になります。

FLV が正しく表示されるようにするには、4 つの依存ファイルすべてをリモートサーバーにアップロードする必要があります。

これらのファイルをアップロードし忘れることが、Web ページで FLV ファイルが正しく実行されない最も一般的な原因です。いずれかのファイルが存在していない場合、白いボックスがページに表示される場合があります。

すべての依存ファイルを確実にアップロードするには、Dreamweaver のファイルパネルを使用して、FLV が表示されるページをアップロードします。ページをアップロードするときに、依存ファイルをアップロードするかどうかを確認するメッセージが表示されます（このオプションをオフにしていない場合）。「はい」をクリックすると、依存ファイルがアップロードされます。

ページをローカルでプレビューしているときの表示の問題

Dreamweaver CS4 でのセキュリティの更新により、「ブラウザーでプレビュー」コマンドを使用して FLV が埋め込まれたページをテストできなくなりました。ただし、Dreamweaver のサイト定義でローカルテストサーバーを定義し、そのテストサーバーを使用してページをプレビューすることは可能です。

通常、ASP、ColdFusion または PHP を使用するページを開発している場合のみ、テストサーバーが必要です（アプリケーション開発のためのコンピューター設定を参照してください）。 HTML のみを使用する Web サイトを作成しており、テストサーバーを定義していない場合は、F12 キー（Windows）または Option + F12 キー（Mac OS）を押すとスキンコントロールがまとめて表示されます。この問題を解決するには、テストサーバーを定義してページのプレビューに使用するか、ファイルをリモートサーバーにアップロードしてそこで表示します。

FLV ファイルに関する問題の考えられる他の原因

• ローカルのプレビューで問題が発生している場合、編集／環境設定／リアルタイムプレビューで「一時ファイルを使用してプレビュー」オプションがオフになっていることを確認してください。

• 最新の Flash Player プラグインを使用していることを確認してください。

• Dreamweaver を使用せずにファイルとフォルダーを移動する場合は慎重に行ってください。Dreamweaver を使用せずにファイルとフォルダーを移動する場合、Dreamweaver では FLV 関連ファイルの正しいパスの正確性を保証できません。

• 問題がある FLV ファイルを、正常に動作することが判明している FLV ファイルと一時的に置き換えることができます。置き換えた FLV ファイルが正常に動作する場合、ブラウザーやコンピューターの問題ではなく、元の FLV ファイルに問題があります。

FLV コンポーネントの編集または削除

Web ページ内のビデオコンテンツの設定を変更するには、Dreamweaver のドキュメントウィンドウでビデオコンポーネントのプレースホルダーを選択し、プロパティインスペクターを使用します。または、ビデオコンポーネントをいったん削除してから、挿入／HTML／Flash ビデオを選択して再挿入します。

FLV コンポーネントの編集

FLV コンポーネントの削除

ビデオ（他の形式）の追加

.flv ファイルでないビデオを追加する方法については、『ビデオの追加（FLV以外）』を参照してください。 

また、Dreamweaver サイトで . mp3 ファイルまたは QuickTime ビデオを再生するために、Dreamweaver でプラグインコンテンツを挿入する方法も確認いただくことをお勧めします。