zaKEY.net - WordPress・iPhoneなどのブログ -

コポキャラの岡崎邦彦(ザッキー)の情報サイト。WordPressやらEC CUBEやらiPhoneについての情報を書いていきます。

HTML・CSS

【html5】<video>タグによる動画の再生サンプル

投稿日:2014年3月20日 更新日:

html5から<video>タグを使用して動画を簡単に再生させることができます。
IE8以下には対応していないので、Javascriptを読み込まして対応させる必要があります。
基本の書き方はこんな感じ。

<video preload="none" poster="xxx.jpg" controls width="xxx" height="xxx">
<source src="xxx.mp4">
<source src="xxx.ogv">
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>
※タグの注意点
preload:動画を読み込みながらスクロールするとカクカクしてしまうかもしれないので、読み込みをnoneになっています。
poster:動画読み込み前に表示する画像です。
controls:通常ではフルスクリーンで表示されますが、それができないタブレット等ではこちらを入れてコントロールバーを入れます。
source:用意する動画はmp4とogv(もしくはwebm)を用意してそちらをソースとするhtmlを記載します。

これだけで動画を表示できますが、IE対策として下記を記載しておきます。
<script type="text/javascript" src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
またサーバーによっては動画のフォーマットが対応できない場合がありますので、下記のhtaccessを入れておきます。
AddType video/ogg .ogg .ogv
AddType video/webm .webm
AddType video/mp4 .mp4
これで<video>タグに対応出来ました。

参照:【HTML5】各デバイス・ブラウザごとの動画再生環境調査

zakey336x280

zakey336x280

-HTML・CSS
-

関連記事

CSS3

【CSS】URLや単語を途中で改行させる方法

長いURL等を貼り付けているとその単語分の幅がないと折り返してしまってうまく改行してくれません。 そんな場合はcssで対応しました。 対応したい要素に対して下記1行で対応できます。 word-brea …

【html】ガラケー用のHTMLテンプレート

【html】ガラケー用のHTMLテンプレート

ガラケーのHTMLを作ることがあるので、テンプレートをおいておきます。 これでHTMLを作って文字コードをShift_JISで作ればとりあえずの形はできます。 <?xml version=&qu …

51o9Pgs4laL._SL160_

iPhone6・iPhone6 PlusのCSSハック

iPhone5までは幅320pxで調整出来ましたが、iPhone6・iPhone6 Plusになって幅が大きくなったためそのためのCSSを入れないといけません。 参考より、こちらで対応できます。 /* …

Sublime Textのautofilenameのwidthとheightが入らない。

Sublime Textのautofilenameのwidthとheightが入らない。

軽くて拡張しやすいので愛用しているSublime Textですが、先日からなぜかautofilenameのwidthとheightが入らない。 Sublime Textを使っている一番の理由がauto …

CSS3

【css3】文字やボックスに影を付ける方法

css3を使えば文字やボックスに影を簡単に付けることができます。 通常はPhotoShopで影の加工をしてそれを使用しますが、cssでできるのであればサイトが自由に作れますし、更新の手間が省けます。 …