ビデオ: HTML5講座 上巻 第4章 HTML 5で登場した新しい要素【動学.tv】 2024
Dreamweaverを使用してビデオファイルをWebページに直接挿入することもできますが、そのようなビデオホスティングサービスの1つを使用することをお勧めします。 YouTubeまたはVimeoとして。
[挿入]メニューから[メディア]を選択すると、複数のビデオとオーディオのオプションが見つかります。 Windows Media Video（.wmv）やQuickTime（。mov）などのより古い独自の形式のビデオファイルを挿入する場合は、[Insert]の[Media]ドロップダウンリストから[Plugin]オプションを選択しますメニュー。
HTML5ビデオタグを使用して最新のビデオフォーマットを使用する場合は、次の手順でビデオをMP4、webM、またはOgg Theoraフォーマットに挿入できます。
-
あなたのウェブページに表示されるファイル。
-
挿入→メディア→HTML5ビデオを選択します。
[挿入]パネルのドロップダウンリストをクリックして[メディア]を選択し、[HTML 5ビデオ]を選択することもできます。デザインには、フィルムアイコンを含む小さいグレーのボックスが表示されます。
<！ - 2 - >
-
フィルムアイコンを含む小さいグレーのボックスをクリックします。
ビデオプロパティは、画面の下部にあるプロパティインスペクタに表示されます。
-
プロパティインスペクタの[ソース]フィールドで、ビデオファイルのURLを入力するか、[参照]アイコンを選択して、ハードドライブ上のビデオファイルを選択します。
<！ - 3 - >ファイルを選択すると、パスとファイル名がソースウィンドウに表示されます。
-
（オプション）[Alt Source 1]および[Alt Source 2]フィールドを使用してURLを入力するか、別の形式でビデオを参照して選択します。
HTML5ビデオタグを使用する複雑さの1つは、mp4、Ogg Theora、webMという3つのビデオフォーマットで使用できることです。人気のあるすべてのWebブラウザでビデオを再生したい場合は、ビデオを3つの形式すべてに含める必要があります。
3つのソースフィールドにはそれぞれ、これらの形式のビデオが埋め込まれています。さらに、Flash Fallbackフィールドに古いWebブラウザ用のFlashビデオを含めることもできます。
4つの異なるフォーマットで4つの異なるビデオファイルを埋め込む必要があると思えば、あなただけではありません。この複雑さは、ブラウザ企業の間で、どのフォーマットがビデオに最適かについての合意が欠如しているためです。
VimeoまたはYouTubeを使用してビデオをホストするもう1つの利点は、ビデオを1つの形式でアップロードできることです.YouTubeとVimeoはそれを変換し、これらの形式で自動的に配信します。
-
プロパティインスペクタのHフィールドとWフィールドにそれぞれ高さと幅を入力します。
オーディオまたはビデオを追加すると、Dreamweaverではファイルの高さと幅が自動的に決定されないため、ファイルを挿入した後でプロパティインスペクタでディメンションを追加する必要があります。
-
ページを保存して、プレビュー（地球儀）アイコン（作業領域の上部にある）をクリックしてブラウザにページを開き、互換性を確保します。
すべてのブラウザですべてのビデオ形式が再生されるわけではありません。動画をテストして、少なくともあなたが主な目的地として指定しているブラウザで再生されていることを確認してください。ファイルを自動再生に設定した場合、ページがブラウザに読み込まれるとファイルが自動的に再生されます。それ以外の場合は、ビデオを開始、一時停止、早送り、巻き戻しできるように、ブラウザに簡単なコントローラが挿入されます。
