挿入／HTML／Flash Video を選択します。
最終更新日 :
2023年9月25日
Dreamweaver で Web ページにビデオを埋め込み、FLV ファイルを挿入する方法について説明します。
Web ページへのビデオの埋め込み（HTML5）
HTML5 には、外部のプラグインやプレーヤーを使わずにブラウザー上でビデオやオーディオファイルを再生する video タグと audio タグがあります。 Dreamweaver では、video タグと audio タグのコードヒントをサポートしています。
ライブビューにはビデオも表示されるので、Web ページに埋め込んだビデオがどのように見えるかを確認できます。
メモ
Web ページにはどのようなビデオを埋め込むこともできますが、すべてをライブビューで再生できるわけではありません。 Dreamweaver では、Apple QuickTime プラグインを使用して video タグと audio タグをサポートしています。 Windows では、Apple QuickTime プラグインがインストールされていない場合、Web ページ内のメディアコンテンツは表示されません。
HTML5 ビデオの挿入方法について詳しくは、Dreamweaver での HTML5 ビデオの挿入を参照してください。
FLV ファイルの挿入
FLV ファイルの挿入
Flashオーサリングツールを使用せずに、FLVビデオをWebページに簡単に追加することができます。ただし、エンコード済みの FLV ファイルを用意する必要があります。
Dreamweaver は FLV ファイルを表示する SWF コンポーネントを挿入します。ブラウザーで表示すると、このコンポーネントは選択した FLV ファイルと再生コントロール一式を表示します。
Dreamweaver では、FLV ビデオをサイト訪問者に配信するための以下のオプションが提供されます：
プログレッシブダウンロードビデオ
FLV ファイルをサイト訪問者のハードディスクにダウンロードしてから再生します。しかし、従来の「ダウンロードして再生」というビデオ配信方法とは異なり、プログレッシブダウンロードでは、ダウンロードが完了する前にビデオファイルの再生を開始することができます。
ストリーミングビデオ
再生をスムーズにするために短時間のバッファー処理を実行した後、ビデオコンテンツをストリーミングして Web ページ上で再生します。 Web ページ上でのストリーミングビデオ再生を可能にするには、Adobe® Flash® Media Server を使用する必要があります。
Dreamweaver で使用する前に、あらかじめエンコードされた FLV ファイルを用意する必要があります。 Sorenson Squeeze または On2 いずれかのコーデック（圧縮/圧縮解除テクノロジ）で作成したビデオファイルを挿入できます。
FLV ファイルを挿入すると、他の SWF ファイルの場合と同じように、そのビデオを再生できる適切なバージョンの Flash Player をユーザーが使用しているかどうかを検出するコードが Dreamweaver によって挿入されます。 バージョンが適切でない場合は、Flash Player 最新バージョンのダウンロードを促す代替コンテンツがページ上に表示されます。
メモ
FLV ファイルを表示するには、ユーザーのコンピューターに Flash Player 8 以降がインストールされている必要があります。 必要なバージョンがインストールされていない場合でも、Flash Player 6.0 r65 以降がインストールされていれば、代替コンテンツではなく Flash Player 簡単インストーラーがブラウザーに表示されます。 簡単インストールを実行しないことをユーザーが選択すると、それから代替コンテンツが表示されます。
ビデオの取り扱いについて詳しくは、ビデオテクノロジーセンター（www.adobe.com/go/flv_devcenter_jp）を参照してください。
FLV ファイルの挿入
FLV の挿入ダイアログで、ビデオタイプのポップアップメニューから「プログレッシブダウンロード」または「ストリーミングビデオ」を選択します。
ダイアログボックスの残りのオプションを入力し、OK をクリックします。
メモ
Microsoft Internet Information Server（IIS）は、ネストしたオブジェクトタグを処理しません。ASP ページでは、Dreamweaver は SWF または FLV ファイルを挿入する際に、ネストしたオブジェクトコードの代わりにネストした object/embed コードを使用します。
プログレッシブダウンロードビデオのオプションを設定
FLV の挿入ダイアログボックスでは、web ページに挿入される FLV ファイルのプログレッシブダウンロード配信のオプションを設定できます。
挿入／HTML／Flash ビデオを選択します（または、挿入パネルの「HTML」カテゴリーにある Flash ビデオアイコンをクリックします）。
FLV の挿入ダイアログボックスで、ビデオタイプメニューからプログレッシブダウンロードビデオを選択します。
次のオプションを指定します。
URL
FLV ファイルへの相対パスまたは絶対パスを指定します。 相対パス（例：mypath/myvideo.flv）を指定するには、参照ボタンをクリックし、FLV ファイルに移動して選択します。絶対パスを指定するには、FLV ファイルの URL（例：http://www.example.com/myvideo.flv)）を入力します。
スキン
ビデオコンポーネントの外観を指定します。 選択したスキンのプレビューがスキンポップアップメニューの下に表示されます。
幅
FLV ファイルの幅をピクセル単位で表します。 FLV ファイルの幅は Dreamweaver によって特定され、自動的にこのフィールドに表示されます。
高さ
FLV ファイルの高さをピクセル単位で表します。 FLV ファイルの高さは Dreamweaver によって自動で最適化され、このフィールドに自動的に表示されます。
メモ
スキンを含めた合計とは、FLV ファイルの幅と高さに、選択したスキンの幅と高さを加えたものです。
縦横比を固定する
ビデオコンポーネントの幅と高さの間で同じ縦横比を維持します。このオプションは初期設定ではオンになっています。
自動再生
web ページが開かれたときにビデオを再生するかどうかを指定します。
自動巻き戻し
ビデオの再生が終了した後、再生コントロールを開始位置に戻すかどうかを指定します。
「OK」をクリックしてダイアログボックスを閉じ、FLVファイルをwebページに追加します。
FLV の挿入コマンドは、web ページでビデオコンテンツを表示するために使用されるビデオプレーヤー SWF ファイルとスキン SWF ファイルを生成します。（新しいファイルを表示するには、ファイルパネルの更新ボタンをクリックする必要がある場合があります。）これらのファイルは、ビデオコンテンツを追加する HTML ファイルと同じディレクトリに保存されます。FLV ファイルを含む HTML ページをアップロードするとき、Dreamweaver はこれらのファイルを依存ファイルとしてアップロードします（［依存ファイルのアップロード］ダイアログボックスで［はい］をクリックした場合）。
ストリーミングビデオのオプションの設定
FLVの挿入ダイアログでは、Webページに挿入されるFLVファイルのストリーミング動画のダウンロードオプションを設定できます。
挿入／HTML／Flash ビデオを選択します（または、挿入パネルの「HTML」カテゴリーにある Flash ビデオアイコンをクリックします）。
ビデオタイプポップアップメニューから「ストリーミングビデオ」を選択します。
サーバー URI
サーバー名、アプリケーション名、およびインスタンス名を rtmp://www.example.com/app_name/instance_name の形式で指定します。
ストリーム名
再生する FLV ファイルの名前を指定します（例：myvideo.flv）。拡張子 .flv は省略可能です。
スキン
ビデオコンポーネントの外観を指定します。 選択したスキンのプレビューが Skinポップアップメニューの下に表示されます。
幅
FLV ファイルの幅をピクセル単位で表します。 FLV ファイルの幅は Dreamweaver によって特定され、このフィールドに自動挿入されます。
高さ
FLV ファイルの高さをピクセル単位で表します。 FLV ファイルの高さは Dreamweaver によって特定され、このフィールドにピクセル単位で自動挿入されます。
メモ
スキンを含めた合計とは、FLV ファイルの幅と高さに、選択したスキンの幅と高さを加えたものです。
縦横比を固定する
ビデオコンポーネントの幅と高さについて一定の縦横比を維持することを指定します。 このオプションは初期設定ではオンになっています。
ライブビデオフィード
ビデオコンテンツがライブであるかどうかを指定します。 「ライブビデオフィード」オプションがオンの場合、Flash Player は Flash® Media Server からストリーミング配信されるライブビデオフィードを再生します。 ライブビデオフィードの名前は、「ストリーム名」テキストボックスで指定した名前です。
メモ
ライブビデオフィードを有効にするには、「スキン」フィールドで Halo スキンのオプションの 1 つを選択する必要があります。 「ライブビデオフィード」がオンの場合、ライブビデオを操作することはできないので、コンポーネントのスキン上にはボリュームコントロールのみが表示されます。 また、「自動再生」および「自動巻き戻し」オプションは無効になります。
自動再生
web ページを開いたときにビデオを再生するかどうかを 指定します。
自動巻き戻し
ビデオの再生が終了した後、再生コントロールを開始位置に 戻すかどうかを指定します。
バッファー時間
ビデオの再生を開始する前にバッファリングに必要な時間を 秒単位で指定します。デフォルトのバッファー時間は0に 設定されているため、再生ボタンをクリックした後、ビデオが 即座に再生を開始します。（Auto Playが選択されている場合、サーバーとの 接続が確立されるとすぐにビデオの再生が開始されます。）サイト訪問者の接続速度より高いビットレートのビデオを 配信する場合や、インターネットトラフィックが帯域幅や 接続性の問題を引き起こす可能性がある場合は、バッファー時間を 設定することをお勧めします。例えば、 web ページがビデオの再生を開始する前に15秒分のビデオを web ページに送信したい場合は、バッファー時間を15に設定します。
OKをクリックしてダイアログボックスを閉じ、FLVファイルを
web ページに追加します。
Insert FLVコマンドは、web ページでビデオを表示するために 使用されるビデオプレーヤーSWFファイルとスキンSWFファイルを 生成します。このコマンドは、Flash Media Serverにアップロードする必要がある main.ascファイルも生成します。（新しいファイルを表示するには、ファイルパネルの 更新ボタンをクリックする必要がある場合があります。）これらのファイルは、ビデオコンテンツを追加するHTMLファイルと 同じディレクトリに保存されます。 FLVファイルを含むHTMLページをアップロードする際は、 SWFファイルをweb サーバーに、main.ascファイルを Flash Media Serverにアップロードすることを忘れないでください。
メモ
サーバーに既にmain.ascファイルがある場合は、Insert FLV コマンドで生成されたmain.ascファイルをアップロードする前に、 サーバー管理者にお問い合わせください。
Dreamweaver文書ウィンドウでビデオコンポーネントプレースホルダーを 選択し、プロパティインスペクター（ウィンドウ > プロパティ）のUpload Mediaボタンをクリックすることで、 必要なすべてのメディアファイルを簡単にアップロードできます。必要なファイルのリストを表示するには、Show required filesをクリックします。
メモ
Upload Mediaボタンは、ビデオコンテンツを含むHTMLファイルを アップロードしません。
Flash Player ダウンロード情報の編集
ページに FLV ファイルを挿入すると、Dreamweaver により、ユーザーが適切なバージョンの Flash Player を使用しているかどうかを検出するコードが挿入されます。 Flash Player のバージョンが適切でない場合、初期設定では、最新バージョンのダウンロードを促す代替コンテンツがページ上に表示されます。 この代替コンテンツはいつでも変更できます。
同様の処理は SWF ファイルにも適用されます。
メモ
必要なバージョンをユーザーが使用していない場合でも、Flash Player 6.0 r65 以降を使用していれば、ブラウザーには Flash Player 簡単インストーラーが表示されます。 簡単インストールを実行しないことをユーザーが選択すると、それから代替コンテンツが表示されます。
文書ウィンドウのデザインビューで、SWFファイルまたは
FLVファイルを選択します。
SWF ファイルまたは FLV ファイルにある目のアイコンをクリックします。
メモ
Control + ]キーを押して代替コンテンツビューに 切り替えることもできます。SWF/FLVビューに戻るには、すべての代替コンテンツが選択される までControl + [キーを押します。その後、再度Control + [キーを 押します。
Dreamweaverの他のコンテンツを編集するのと同じように
コンテンツを編集します。
メモ
SWFファイルやFLVファイルを代替コンテンツとして 追加することはできません。
目のアイコンを再度クリックして、SWF または FLV
ファイル表示に戻ります。
FLV ファイルのトラブルシューティング
このセクションでは、FLV ファイルの問題の最も一般的な 原因について詳しく説明します。
関連ファイルの欠如による表示の問題
Dreamweaver CS4 以降で生成される コードは、FLV ファイル自体とは異なる 4 つの依存ファイルに依存しています：
swfobject_modified.js
expressInstall.swf
FLVPlayer_Progressive.swf
スキンファイル（Clear_Skin_1.swf など）
Dreamweaver CS3 と比較して、Dreamweaver CS4 以降には 2 つの追加の依存ファイルがあることに注意してください。
これらのファイルの最初の 2 つ （swfobject_modified.js と expressInstall.swf）は、Scripts というフォルダーにインストールされます。このフォルダーは、まだ存在しない場合に Dreamweaver がサイトのルートに作成します。
後の 2 つのファイル （FLVPlayer_Progressive.swf とスキンファイル）は、FLV が埋め込まれているページと同じフォルダーにインストールされます。スキンファイルには FLV のコントロールが含まれており、その名前は Dreamweaver ヘルプで説明されているオプションで選択されたスキンによって決まります。例えば、 Clear Skin を選択した場合、ファイルは Clear_Skin_1.swf という名前になります。
FLV が正しく表示されるには、 4 つの依存ファイルすべてをリモートサーバーにアップロードする必要があります。
これらの ファイルのアップロードを忘れることは、FLV ファイルが web ページで正しく実行されない最も一般的な原因です。ファイルの 1 つが欠落している場合、ページに「白いボックス」が表示される可能性があります。
すべての依存 ファイルがアップロードされていることを確認するには、Dreamweaver ファイルパネルを使用して、FLV が表示されるページをアップロードします。ページをアップロードすると、Dreamweaver は 依存ファイルをアップロードするかどうかを尋ねます（このオプションをオフにしていない場合）。「はい」をクリックすると、依存ファイルがアップロードされます。
ページをローカルでプレビューする際の表示の問題
Dreamweaver CS4 のセキュリティ更新により、Dreamweaver サイト定義でローカルテストサーバーを定義し、テストサーバーを使用してページをプレビューしない限り、埋め込み FLV を含むページをテストするために「ブラウザーでプレビュー」コマンドを使用することはできません。
通常、テストサーバーが必要になるのは、ASP、ColdFusion、または PHP でページを開発している場合のみです（アプリケーション開発用にコンピューターを設定を参照）。HTML のみを使用する web サイトを 作成していて、テストサーバーを定義していない場合、F12 キー（Windows）Opt+F12 キー（Macintosh）を押すと、画面上にスキンコントロールが乱雑に表示されます。回避策は、テストサーバーを定義してテストサーバーを使用してページをプレビューするか、ファイルをリモートサーバーにアップロードしてそこで表示することです。
メモ
セキュリティ設定がローカル FLV コンテンツをプレビューできない原因となっている可能性もありますが、アドビはこれを確認することができませんでした。セキュリティ設定を変更して問題が解決されるか試してみることもできます。 セキュリティ設定の変更について詳しくは、テクニカルノート 117502 を参照してください。
FLV ファイルの問題の他の考えられる原因
ローカルのプレビューで問題が発生している場合、編集／環境設定／リアルタイムプレビューで「一時ファイルを使用してプレビュー」オプションがオフになっていることを確認してください。
最新の Flash Player プラグインを使用していることを確認してください。
Dreamweaver を使用せずにファイルとフォルダーを移動する場合は慎重に行ってください。 Dreamweaver を使用せずにファイルとフォルダーを移動する場合、Dreamweaver では FLV 関連ファイルの正しいパスの正確性を保証できません。
問題がある FLV ファイルを、正常に動作することが判明している FLV ファイルと一時的に置き換えることができます。 置き換えた FLV ファイルが正常に動作する場合、ブラウザーやコンピューターの問題ではなく、元の FLV ファイルに問題があります。
FLV コンポーネントの編集または削除
Web ページ内のビデオコンテンツの設定を変更するには、Dreamweaver のドキュメントウィンドウでビデオコンポーネントのプレースホルダーを選択し、プロパティインスペクターを使用します。 または、ビデオコンポーネントをいったん削除してから、挿入／HTML／Flash ビデオを選択して再挿入します。
FLV コンポーネントの編集
プレースホルダーの中央にある FLV アイコンをクリックして、Dreamweaver ドキュメントウィンドウでビデオコンポーネントプレースホルダーを選択します。
プロパティインスペクター（ウィンドウ／プロパティ）を
開いて変更を行います。
メモ
プロパティインスペクターを使用してビデオタイプを変更することはできません（例えば、プログレッシブダウンロードからストリーミングへなど）。ビデオタイプを変更するには、 FLV コンポーネントを削除し、挿入／メディア／FLV を選択して再挿入します。
FLV コンポーネントの削除
Dreamweaver ドキュメントウィンドウで FLV コンポーネントプレースホルダーを選択し、Delete キーを押します。
ビデオ（他の形式）の追加
.flv ファイルでないビデオを追加する方法については、『ビデオの追加（FLV以外）』を参照してください。
また、Dreamweaver サイトで . mp3 ファイルまたは QuickTime ビデオを再生するために、Dreamweaver でプラグインコンテンツを挿入する方法も確認いただくことをお勧めします。
