動画について
動画の形式
novelsphere.js コンテンツを制作する際には、1つの動画に対し、以下の形式のファイルを同時に用意しなければなりません。
- H.264 形式(拡張子は .mp4)
- Ogg Theora 形式(拡張子は .ogv)
- VP8 形式(拡張子は .webm)
例えば「hoge.avi」という動画ファイルを再生したい場合には、「hoge.mp4」(H.264 形式)、「hoge.ogv」(Ogg Theora 形式)および「hoge.webm」(WebM 形式)という3つのファイルを用意し、それら全てをプロジェクトフォルダ内に置いておく必要があります。これは、いずれか1つの形式の動画しか再生できないブラウザが存在するためです。
なお、拡張子は必ず上記のものを使用してください。
動画の再生
動画を再生するには、[playvideo]タグを使います。
[playvideo]タグは動画の再生終了を待たずに次の行へとコンテンツを進めてしまいます。直後に[wv]タグを置くことで、その動画の再生が終わるまでコンテンツの進行を止めることができます。
[playvideo storage="hoge"]
[wv]
また、一般に動画はファイルサイズが大きいため、再生する瞬間にダウンロードが始まるのでは時間がかかってしまうケースがあります。[openvideo]タグをあらかじめ実行しておくことで、ダウンロードを先に始めておき、[playvideo]タグに達した際にスムーズに再生を開始することができます。
[openvideo storage="hoge"]
この間に読むのに時間のかかるテキストを書くなどして時間を稼ぎます。[p][cm]
[playvideo]
[wv]
動画の停止
動画の再生を途中で停止するには、[stopvideo]タグを使います。
[playvideo storage="hoge"]
[wait time="40000" canskip="false"]
[stopvideo]
動画の再生を40秒で停止しました。
動画の設定
動画再生に関わる様々な設定を行うには、[video]タグを使います。
このタグでは、動画表示領域の位置や大きさのほか、再生速度なども設定することができます。詳しくは「タグリファレンス」も併せて参照してください。
; 画面上の位置を指定し、半分の音量で動画を再生する場合
[video left="100" top="50" volume="50"]
[playvideo storage="hoge"]
[wv]
スマートフォンで動画を再生する際の制限
スマートフォンで動画を再生する場合、大きな制限がいくつかあります。
- iPhone で動画が再生できない
- 現在のところ、iPhone で動画を再生することはできません。ちなみに、iPad では動画を再生することができます。
- 1回もタップをしていない状態では動画が再生できない
- サウンドと同じく、動画を再生する前には、コンテンツの再生が始まってから少なくとも1回はユーザに画面をタップさせる必要があります。
- アスペクト比を変えた動画を再生できない
- [video]タグでは width 属性と height 属性が自由に指定できますので、元の動画とアスペクト比(縦横比)が異なった数値を指定することもできます。しかし、このような指定をした場合、スマートフォン端末では正常に動画が再生されません。
- プリロードが行えない
- 先述の通り、[openvideo]タグによって動画ファイルのダウンロードをあらかじめ開始しておくことができますが、スマートフォンではこの機能が働きません。