WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： qam
カテゴリー： マークアップ >テクニック

今日の話題は動画です。
ホームページに掲載する方法は、YouTubeにアップしたりなど、
様々な方法がありますが、今回はHTML5のvideoタグを利用したいと思います。

まず、動画を用意します。
videoタグでは、閲覧者のブラウザ環境などで左右されてしまうので、
それぞれの環境にあった形式の動画を用意します。
私の場合は、mp4形式、ogv形式、webm形式で用意しています。

mp4形式･･･Google Chrome・Safari向け
ogv形式･･･Firefox・Opera向け
webm形式･･･Google Chrome・Opera向け
です。たぶん。。

で、実際のタグはこんな感じです。

<video poster=”xxx.jpg” width=”000″ height=”000″ preload=”none” onclick=”this.play();” controls>
<source src=”xxx.mp4″ type=”video/mp4″>
<source src=”xxx.ogv” type=”video/ogg”>
<source src=”xxx.webm” type=”video/webm”>
<p>ご覧のブラウザでは、動画を再生されません。</p>
</video>

タグは上から読み込まれていくので、
対応する動画が読み込まれていくことになります。
videoタグ対応していないブラウザのために、文章も用意しておきます。

videoタグ内の説明をすると、
・poster
サムネイル用の画像を設定します。
・preload=”none”
複数の動画を表示する際にデフォルトでの読み込みを停止します。
・onclick=”this.play();”
Android系端末で再生できないことがあるのでその対策です。
・controls
コントロールバーを表示させます。iPadでは、これがないと再生できないみたいです。

これにプラスして、自動再生させたいときは、autoplayをいれます。

これで完成です。

ちなみに、最近私がよくやるのですが、ベーシック認証をかけているところでは、
再生されないようですので、気をつけてくださいね。

以上。videoタグについてでした！