今日は現在作成している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;
と指定すると中央に配置することができます。