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

2012/10/12

videoタグで動画配信

投稿者: 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タグについてでした!

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ