サポート問い合わせ先
システムステータス
サムネイルプレビュープラグインを表示する
例
下の画像は、ユーザーが進行状況バーにマウスを移動したときに表示されるサムネイルを示しています。
以下のサンプルビデオはThumbnails Pluginの使用方法を示しています。 ビデオの再生を開始します。 次に、進行状況バーの上にマウスを置き、サムネイル画像を選択してビデオのその部分にジャンプします。
このトピックには次のセクションが含まれます。
サムネイル画像を収集する
現時点では、自分で画像を収集する必要があります。 サムネイルのプレビューは、 Zencoder エンコード処理。 また、ツールは次のように存在します SnapMotion このプロセスを自動化します。
どのように画像を生成しても、使用する画像の数を決めて適切なサイズを選択する必要があります。
埋め込みコードを使用して実装する
サムネイルは、サムネイルプラグインを使用して構成できます。 埋め込みコードを使用してサムネイルプラグインを実装するには、次の手順に従います。
- In Video Cloud Studio、開いて MEDIA モジュールを開きます。
- 使用するビデオを選択し、 パブリッシュと埋め込み をクリックします。 ボタン。
- ダイアログで、次のいずれかを選択します Brightcove デフォルト Player、またはA player あなたが設定したこと。
-
コピー 高度な コードを埋め込み、
id属性をvideo-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> - 貼り付け player HTMLページコードを使用してエディターにコードを埋め込みます。
- の中に
headページコードのセクションに、次のCSSファイルを追加します。<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.css"> - の中に
bodyセクション、下 player コードを埋め込むには、次のJavaScriptファイルを追加します。<script src="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.js"></script> -
前のスクリプトの下に、次のスクリプトブロックを追加します。
- あなたへの言及を得る player 準備ができたら
-
コール
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>
プロパティ
サムネイル画像を制御するには、次のプラグインプロパティを使用します。
- 最初の議論：
- 値は文字列または数値で、オブジェクトに関連付けられます。
- これは、サムネイル画像を表示する時間を秒単位で定義します。
- 最低でも、
0プロパティを持つsrcユーザーが進行状況バーの先頭にカーソルを置いたときの値です。 追加の時間がある場合、プラグインはプログレスバーを分割し、ユーザーが進行状況バーの上を移動するときに適切なイメージを表示します。
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は、 options CSSイメージスプライトを使用する場合のプロパティ：
{
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)'
}
}
変更履歴
報告されていない