ブライトコーブの埋め込み用タグには大きく分けて2つの埋め込み方法があります。
一つはiframeでの埋め込み。もう一つはvideoタグでの埋め込みです。
今回はvideoタグでの埋め込みについて説明していきます。
初期の埋め込みコード
まず始めに、ブライトコーブのアカウントを自分たちで管理していない場合は、
iframeではなく以下のようなvideoタグのコードを提供してもらうようにしてください。
コードを生成する際にレスポンシブにチェックが入っていると、videoタグをwrapするdivが追加されます。
背景の全画面表示にする場合などは不要なため、videoをwrapしているdivは適宜削除しましょう。
videoタグのstyle属性もCSSで記述するほうが管理しやすくなるので削除します。
<div style="position: relative; display: block; max-width: 100%;">
<div style="padding-top: 56.25%;">
<video data-video-id="＊＊videoID＊＊"
data-account="＊＊account＊＊"
data-player="default"
data-embed="default"
data-application-id
class="video-js"
controls
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></video>
<script src="//players.brightcove.net/＊＊account＊＊/default_default/index.min.js"></script>
</div>
</div>
一部追加・削除
videoタグの属性に追加していきます。
まず、生成されたコードにはidが付与されていません。
idを追加しない場合は、videoタグをwrapするdivが自動生成され、そのdivに対してidが付与されますが、
インスタンスを作成するために必要になりますのでidは追加するようにしましょう。
自動再生やコントローラーの有無など、必要に応じてオプションを追加します。
<video data-video-id="＊＊videoID＊＊"
data-account="＊＊account＊＊"
data-player="default"
data-embed="default"
data-application-id
class="video-js"
id="mv_video" // ← ====IDを追加====
autoplay // ← ====自動再生追加====
// ← ====controls削除====
></video>
<script src="//players.brightcove.net/＊＊account＊＊/default_default/index.min.js"></script>
不要な要素の削除
再生アイコンや動画上部の情報など、不要な要素がある場合は、
CSSで直接非表示にします。
/* video上部に表示されるvideo情報 */
.vjs-dock-text {
display: none !important;
}
/* 再生ボタン */
.vjs-big-play-button {
display: none !important;
}
コントローラーはオプションかメソッドで表示・非表示が可能です。
コントローラーの色や再生アイコンのデザインを変更したい場合は、CSSで調整が可能です。
よく使いそうなメソッド・イベント 一覧
よく使われそうなメソッドとイベントをざっとまとめました。
一部を抜粋しているため、他にも詳しく知りたい方は
参考サイトをご確認ください。
//videoに設定したIDでインスタンスを作成
var myPlayer = videojs('mv_video');
// ========== メソッド ==========
// 再生
myPlayer.play();
// 一時停止
myPlayer.pause();
// 自動再生 get
console.log( myPlayer.autoplay() ); // 結果：true / false
// 自動再生 set
myPlayer.autoplay( true ); // true / false
// 再生位置 get
console.log( myPlayer.currentTime() ); // 結果：（秒数）
// 再生位置 set（1 = 1秒）
myPlayer.currentTime(120);
// videoのURL取得
myPlayer.currentSrc();
// コントローラー表示・非表示
myPlayer.controls(true) //false
// プレーヤーが「終了」状態にあるかどうかを返します。
console.log( myPlayer.ended() ); // 結果：true / false
// 動画要素のループ属性を取得または設定します。
// ループ get
console.log( myPlayer.loop() ); // 結果：true / false
// ループ set
myPlayer.loop(true); // true / false
// 音量 get
console.log( myPlayer.volume() ); //結果：0〜1の数字
// 音量 set （Max = 1, Min = 0）
myPlayer.volume(0.5); // 半分の音量
// 消音 get
console.log( myPlayer.muted() ); //結果：true / false
// 消音 set
myPlayer.muted(true); // muteの場合true
// プレーヤーが一時停止しているかどうかを確認する
console.log( myPlayer.paused() ); //結果：再生中:false / 停止:true
// ポスター画像のソースURLを取得または設定する
// ポスター get
console.log( myPlayer.poster() ); //結果：http://example.com/XXX.jpg
// ポスター set
myPlayer.poster('http://example.com/myImage.jpg');
// ========== イベント ==========
//video読み込み後の処理（loadeddataより処理が早い）
//プレーヤの初期デュレーションおよびディメンション情報があるときに発生します。
myPlayer.on('loadedmetadata', function() {
console.log('読み込み完了後の処理')
});
//video読み込み後の処理
//現在の再生位置でデータをダウンロードしたときに発生します。
myPlayer.on('loadeddata', function() {
console.log('読み込み後の処理1');
});
//現在の再生位置が変更されたときに起動します。
myPlayer.on('timeupdate', function() {
console.log('再生中');
});
//再生完了
myPlayer.on('ended', function() {
console.log('再生完了');
});
//ボリュームを変更
myPlayer.on('volumechange', function() {
console.log('ボリュームを変更');
});
//エラーが発生したときに発生します。
myPlayer.on('error', function() {
console.log('エラー');
});
//ユーザーがアクティブな場合に発生します。プレーヤーの上にマウスを移動する。
//※うまく動作しない
myPlayer.on('useractive', function() {
console.log('オンマウスしました');
});
再生中の時間を常に取得
再生中の時間を常に取得することで、様々なことに対応できます。
よくある実装だと。
・開始5秒後にSkipボタンを表示。
・途中から動画をクロスフェードで切り替える。
・完了後、別の画面を表示させる。
・動画終了の数秒前、徐々にフェードアウトさせて動画を停止。
などなど。
そんな時は、常に再生時間を監視できる timeupdate と、現在の再生時間を取得できる currentTime() を組み合わせることで簡単に実装することができます。
var time;
myPlayer.on('timeupdate', function() {
time = myPlayer.currentTime()
if(time > 20) {
$('#mv_video').fadeOut('400', function(){
myPlayer.pause().currentTime(0);
});
}
});
myPlayer.pause().currentTime(0); 停止してから再生位置を0秒にすることで、次回は最初から再生されるようにしています。
その他に、video読み込み後の処理をするloadedmetadataもよく使うイベントですので、覚えておくと良いと思います。