例
以下の画像は、ユーザーがプログレスバーの上にマウスを置いたときに表示されるサムネイルを示しています。
以下のサンプルビデオは、サムネイルプラグインの使用法を示しています。ビデオの再生を開始します。次に、進行状況バーにマウスカーソルを置き、サムネイル画像を選択して、ビデオのそのセクションにジャンプします。
このトピックは、次のセクションで構成されています。
サムネイル画像を収集する
この時点で、画像を自分で収集する必要があります。プレビューサムネイルは、 Zencoder エンコーディングプロセスの一部として生成できます。また、このプロセスを自動化するためのSnapMotionのようなツールもあります。
画像をどのように生成しても、使用する画像の数を決定し、適切なサイズを選択する必要があります。
埋め込みコードを使用して実装する
サムネイルは、サムネイルプラグインを使用して設定できます。埋め込みコードを使用してサムネイルプラグインを実装するには、次の手順に従います。
- ビデオクラウドスタジオで、 MEDIA モジュールを開きます。
- 使用するビデオを選択し、[ 公開して埋め込む] ボタンを選択します。
- ダイアログで、Brightcove のデフォルトプレーヤ、または設定したプレーヤーを選択します。
-
高度な埋め込みコードをコピーし、
idvideo-jsタグに属性を追加します。これは次のようになります。<video-js id="myPlayerID" data-account="1752604059001" data-player="default" data-embed="default" controls="" data-video-id="2026618970001" data-playlist-id="" data-application-id="" width="960" height="540"></video-js> <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script> - HTML ページコードを使用して、プレーヤーの埋め込みコードをエディターに貼り付けます。
headページコードのセクションに、次の CSS ファイルを追加します。<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.css">bodyセクションで、プレーヤーの埋め込みコードの下に、次の JavaScript ファイルを追加します。<script src="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.js"></script>-
前のスクリプトの下に、次のスクリプトブロックを追加します。
- 準備ができたら、プレーヤーへの参照を取得します
-
を呼び出す
thumbnailsプレビューサムネイル画像付きプラグイン
<script> videojs.getPlayer('myPlayerID').ready(function() { var myPlayer = this; myPlayer.thumbnails(thumb_data); }); var thumb_data = { "0": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-lionfish-thumbnail.png", "width": 120 }, "29": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-anemone-thumbnail.png" }, "54": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-clownfish-thumbnail.png" }, "84": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-seahorse-thumbnail.png" }, "114": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-crab-thumbnail.png" }, "143": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-dolphins-thumbnail.png" } }; </script>この例では、次のようにマウスをタイムライン上に置くとサムネイルプレビュー画像が表示されます。
- ザの sea-lionfish-thumbnail.png 映像はビデオ開始から29秒まで表示される
- ザの sea-anemone-thumbnail.png 画像は29秒から54秒まで表示される
- ザの sea-clownfish-thumbnail.png 画像は54秒から84秒まで表示される
. . .
- ザの sea-dolphins-thumbnail.png 映像は動画の最後まで143秒から表示される
プラグインオプションの詳細については、プロパティセクション。
-
完全なコード例は次のとおりです。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Display Thumbnail Previews</title> <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.css"> </head> <body> <video-js id="myPlayerID" data-account="1752604059001" data-player="default" data-embed="default" controls="" data-video-id="2026618970001" data-playlist-id="" data-application-id="" width="960" height="540"></video-js> <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script> <!-- Script for thumbnails plugin --> <script src="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.js"></script> <script> videojs.getPlayer('myPlayerID').ready(function() { var myPlayer = this; myPlayer.thumbnails(thumb_data); }); var thumb_data = { "0": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-lionfish-thumbnail.png", "width": 120 }, "29": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-anemone-thumbnail.png" }, "54": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-clownfish-thumbnail.png" }, "84": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-seahorse-thumbnail.png" }, "114": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-crab-thumbnail.png" }, "143": { "src": "http://solutions.brightcove.com/bcls/assets/images/sea-dolphins-thumbnail.png" } }; </script> </body> </html>
[プロパティ]
サムネイル画像の制御には、次のプラグインプロパティが使用されます。
- 最初の引数:
- 値は文字列または数値で、オブジェクトに関連付けられます。
- サムネイル画像を表示する時間を秒単位で定義します。
- 少なくとも、
0srcプログレスバーの先頭にユーザーがマウスポインタを置いたときの値を持つプロパティが必要です。追加の時間があれば、プラグインはプログレスバーを分割し、ユーザーがプログレスバーにカーソルを合わせると適切な画像を表示します。
src:- 値は文字列でなければなりません。
- これはサムネイル画像の URL です。
width:- このプロパティは最初のサムネイル画像に含める必要があります。プログレスバーの先頭または末尾の近くにあるときに、画像が表示の外にスライドしないようにします。
プログレスバーで 3 つの時間ブロックのサムネイルイメージを設定する例を次に示します。
- 最初の画像は、ユーザーがビデオ開始から5秒までプログレスバーの上にマウスを置いたときに表示されます
- 2 番目の画像は 5 秒から 10 秒まで表示されます
- 3番目の画像は10秒からビデオ終了まで表示されます
{
"0": {
"src": "http://solutions.brightcove.com/bcls/assets/images/Tiger-4-preview.jpg",
"width": 120
},
"5": {
"src": "http://solutions.brightcove.com/bcls/assets/images/Water-4-preview.jpg"
},
"10": {
"src": "http://solutions.brightcove.com/bcls/assets/images/BirdsOfAFeather-4-preview.jpg"
}
}
CSS画像スプライト
選択した場合は、プレビューサムネイルとして CSS イメージスプライトを使用できます。以下の JSON は、CSS optionsイメージスプライトを使用する場合のプロパティの例です。
{
0: {
src: 'thumbnails.png',
style: {
left: '-60px',
width: '600px',
height: '68px',
clip: 'rect(0, 120px, 68px, 0)'
}
},
10: {
style: {
left: '-180px',
clip: 'rect(0, 240px, 68px, 120px)'
}
},
20: {
style: {
left: '-300px',
clip: 'rect(0, 360px, 68px, 240px)'
}
},
30: {
style: {
left: '-420px',
clip: 'rect(0, 480px, 68px, 360px)'
}
},
40: {
style: {
left: '-540px',
clip: 'rect(0, 600px, 68px, 480px)'
}
}
更新履歴
報告なし