そろそろvideoタグも一般的になってきたようなので、とりあえず使ってみる事にしました。
とはいえvideo要素はブラウザごとに対応が違うので、いくつかファイルフォーマットを用意する必要があります。
mp4、webm、ogvの3種類くらいで書き出しておけばいいかと思います。
僕の場合は動画編集はWindowsムービーメーカー、変換はXMedia Recodeを使ってみました。
次にサーバの対応を調べ、なければ.htaccessで指定します。
AddType video/mp4 .mp4
AddType video/webm .webm
AddType video/ogg .ogv
この3行で足ります。
その後ソースコードを書きます。
絶対パスでも行けます。
‹video controls poster=”image.jpg” width=”300″ height=”200″›
‹source src=”movie.mp4″›
‹source src=”movie.ogv”›
‹source src=”video.webm”›
‹p›動画を再生するには、videoタグをサポートしたブラウザが必要です。‹/p›
‹/video›
この場合は３つのファイルをそれぞれ読み込むのですが、ブラウザが非対応ならば次のファイル形式を読みます。
どれも非対応ならエラーが出ます。
ファイルが3つありますがブラウジングされるのは最初に読んだ1ファイルになります。
image.jpgは最初に表示される画像なので、動画と別の表紙が設定できます。
ファイルネームとコードが合ってれば名前はなんでもかまいません。
controlsはコンソールの有無なので、問答無用で再生させる場合は無しでよいです。
サイト自体の背景に動画が使用されているページもありますので、そういった場合autoplay属性を入れてcontrols無しになるかと思います。
videoは今後ブラウザの対応と共に普及してくると思いますので、Webデザインと一緒に動画の制作が必要になってくる場面も今後増えてくると思います。
梅木千世でした。
