meclibで作成したデジタルブックでは、紙面上やリンクのポップアップ表示で動画を埋め込むことが可能です。

動画を埋め込んだ箇所には、動画の内容をイメージさせるサムネイル画像を表示させたい場合や、特定のシーンから再生させたいといった要望もあるのではないでしょうか。

meclibのデジタルブックはHTML5で作成しており、videoタグが利用できますので、動画の設定に様々な指定が可能です。

そこで今回は、動画を埋め込む際に知っておくと便利な2つの設定をご紹介します。

その前に、動画コンテンツの作成について

デジタルブックに設定する動画コンテンツについては、以前お役立ち情報で紹介した「動画やスライド画像のダウンロードを禁止する方法」と同様に、コンテンツジェネレータで作成したコンテンツを利用します。

ご覧になっていない方は、まずはこちらをお読みください。

videoタグを設定して、サムネイル画像を表示する

videoタグ(video要素)では、動画が表示できない場合や、動画を再生する準備が整うまでの間、表示させたい画像をURLで指定するposter属性が利用できます。

1.動画コンテンツ(zipファイル)を解凍し、その中に含まれる「index.html」をテキストエディタなどで開きます。

2.「index.html」に次のように、poster属性を追加し、保存します。

videoタグの設定を変更します。

<video controls preload="auto" width="100%" height="100%">

↓

<video controls preload="auto" width="100%" height="100%" poster="画像のURL">

3.再度フォルダごと、zip圧縮します。

以上の操作で完了です。

ブック管理画面にアクセスし、「編集」ボタンから「リンク設定」や「コンテンツ設定」でアップロードの上、紙面上に配置してください。

それでは、設定前と設定後でどのように変わったかを、見ていきましょう。　

画像を指定していない場合の表示

画像を指定していないため、動画の1フレーム目が表示されています。

URLで画像を指定した場合の表示

URLで指定した任意の画像が表示されます。

このように、動画を埋め込んだ箇所にvideoタグのposter属性を指定すれば、動画の内容をイメージさせる画像を表示することができ、ユーザーに再生を促すことが可能になります。

videoタグを設定して、再生開始地点や終了地点を指定する

videoタグ(video要素)では、動画ファイル名の末尾にパラメーターで再生範囲を指定することができます。

※ブラウザによっては対応していないことで正常に表示されない場合があります。

1.動画コンテンツ(zipファイル)を解凍し、その中に含まれる「index.html」をテキストエディタなどで開きます。

2.「index.html」に次のように、ファイル名の末尾にパラメーターを追加し、保存します。

videoタグの設定を変更します。

<source src="動画ファイル.mp4" type='video/mp4'>

↓

<source src="動画ファイル.mp4#t=[開始時間],[終了時間]" type='video/mp4'>

パラメーターの記入例

• src=”動画ファイル.mp4#t=10,30″　→10秒地点から30秒地点までの範囲を再生
• src=”動画ファイル.mp4#t=,30″　→最初から30秒時点までの範囲を再生
• src=”動画ファイル.mp4#t=,01:00:00″　→最初から1時間までの範囲を再生
• src=”動画ファイル.mp4#t=10″　→10秒時点から最後まで再生

3.再度フォルダごと、zip圧縮します。

以上の操作で完了です。

ブック管理画面にアクセスし、「編集」ボタンから「リンク設定」や「コンテンツ設定」でアップロードの上、紙面上に配置してください。

それではこちらも、設定前と設定後でどのように変わったかを、見ていきましょう。

再生開始地点を設定していな場合

設定をしていないため、最初から再生されます。

再生開始地点を10秒で指定した動画

動画の再生開始が10秒の地点からスタートします。

このように、動画ファイル名の末尾にパラメーターを指定することで、見せたい箇所から再生可能になります。

これらの設定を活用すると・・・

いかがでしたでしょうか。

これらの設定を活用すれば、以下のような動画再生が可能です。

例えば、デジタルブックで作成した取扱説明書などに、操作説明用の動画を掲載する場合、１つの動画を参照させて再生開始時間別に複数の動画コンテンツとして紹介することもできます。

そうすることで、デジタルブック全体のデータ容量の削減につなげることも出来ると思います。

ぜひ、お試しください。

Tweet