動画を表示する★動画を掲載するHTML5から追加されたvideo要素を使って、ウェブページに動画を掲載してみましょう。サンプルサイトで動画を掲載する部分では、動画ファイルsample.mp4・sample.ogv・sample.webmを使用します。動画ファイル:sample.mp4動画を再生するには、videoタグをサポートしたブラウザが必要です。動画ファイルの他に、画像ファイルfirstframe.jpgも使用します。画像ファイル:firstframe.jpgまず、imagesフォルダと同じ階層に、新しくvideosという名前のフォルダを作成してください。いま作成したvideosフォルダは、sample.mp4などの動画ファイルや、firstframe.jpgを入れるためのフォルダです。ダウンロードしたサンプルファイルから、画像ファイルfirstframe.jpgをコピーしてvideosフォルダに入れてください。すれば、少なくとも「sample.mp4」が手に入ります。残りの「sample.ogv」と「sample.webm」は、動画形式を変換しただけですから、無くてもあまり問題ないように思います。product.htmlに以下の記述を追加してください。src="videos/sample.webm"><p>動画を再生するには、videoタグをサポートしたブラウザが必要です。Reserved.</small></div></div></body></html>保存したらブラウザで表示してみましょう。「紹介ビデオ」のところに動画の再生画面が表示されれば成功です。上記のHTMLソースでは、ウェブページに動画を埋め込むのにvideo要素を使用しています。動画再生には、使用しているブラウザがvideo要素をサポートしていて、なおかつ、そのブラウザが、mp4形式・ogv形式・webm形式のいずれかの動画形式をサポートしている必要があります。動画部分に「動画を再生するには、videoタグをサポートしたブラウザが必要です。Chromeなどのブラウザで表示確認してください。video要素の使い方あらためて、今回product.htmlに追加したHTMLソースの内容を振り返りながら、video要素の使い方を確認していきましょう。src="videos/sample.webm"><p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</video>の内側に、source要素で3つのフォーマットの異なる動画ファイルを指定しています。</video>のなかに複数のsource要素を記述しておくことで、ブラウザに対して動画の再生候補を提示することができます。ブラウザは、記述された順に再生可能なリソースを利用するので、より多くの環境で動画を視聴してもらえる可能性が高くなります。source要素のtype属性では、それぞれの動画リソースごとにMIMEタイプやコーデックを指定することができます。動画を利用するためのインターフェースを、ブラウザが自動で表示することになっています。video要素のposter属性で動画のヒントとなる画像を表示するvideo要素がサポートされているブラウザであっても、制作者の用意した動画形式をサポートしているとは限りません。このような場合に、video要素のposter属性で画像ファイルを指定しておくと、ブラウザで利用できる動画形式が無い場合にも、その画像を表示させることができます。poster属性で指定する画像は、ユーザーにその動画の内容がどのようなものかを知らせるヒントとなるものが適しています。動画の開始部分のフレーム画像などです。</p>の部分は、video要素がサポートされていない環境向けの情報です。</video>の内側には、video要素がサポートされていない環境で表示させるメッセージを記述することができます。ユーザーはvideo要素がサポートされていない旧いバージョンのブラウザで閲覧しているかもしれないので、video要素を使用する場合には、video要素がサポートされていない環境向けのメッセージも記述しておくほうが良いでしょう。このメッセージはvideo要素がサポートされている環境では表示されません。各ブラウザ向けに複数の形式の動画ファイルを用意する上記のHTMLソースでは、mp4形式・ogv形式・webm形式の3種類の動画形式を指定しています。Chrome・Opera向けです。同じ内容の動画なのに形式を変えて複数用意するのは面倒ですが、できるだけ多くのユーザーに動画を視聴してもらうための対処です。ここまでの制作段階で、「製品紹介」ページは以下の状態となっています。