TIESのブログ

Videoタグの調整

on 2014年6月26日

今日は現在作成しているEPUB3のCHiLO Bookに動画を埋め込みました。

VideoタグはHTML5で新たに追加されたタグで、Flash PlayerやQuicktime等の
外部プラグインなしにページ内に動画を埋め込んで、再生することができます。

EPUB3はHTML5で作成されているので、このVideoタグで本文中に動画を埋め込めるわけです。

サンプルのタグはこんな感じ。

 <video controls width="320" height="180" poster="../Images/on_m_opening.jpg">
 <source src="../Video/01m_opening_e.m4v" />
 </video>

controlsは動画の再生停止ボタン等を表示させるかどうかの設定。
widthとheightで動画プレーヤーのサイズを指定します。
posterは動画のサムネイル。EPUB的にはiBooksなら指定しなくてもサムネイルを表示してくれるのですが
他のEPUBリーダーは表示してくれない場合もあるので、設定したほうがいいです。

あとはsourceでEPUBのビデオフォルダにある動画を指定するだけ、と。
ね、簡単でしょう?

ところがこのままだと動画プレーヤーが左寄せになってしまい、あまり見栄えがよくないです。
この場合はスタイルシートで

text-align:center;

と指定すると中央に配置することができます。