Brightcove（ブライトコーブ）の埋め込み動画をJavascriptで制御（再生・停止）

ブライトコーブの埋め込み用タグには大きく分けて2つの埋め込み方法があります。
一つはiframeでの埋め込み。もう一つはvideoタグでの埋め込みです。

今回はvideoタグでの埋め込みについて説明していきます。

##初期の埋め込みコード

まず始めに、ブライトコーブのアカウントを自分たちで管理していない場合は、
iframeではなく以下のようなvideoタグのコードを提供してもらうようにしてください。
コードを生成する際にレスポンシブにチェックが入っていると、videoタグをwrapするdivが追加されます。
背景の全画面表示にする場合などは不要なため、videoをwrapしているdivは適宜削除しましょう。
videoタグのstyle属性もCSSで記述するほうが管理しやすくなるので削除します。

html

<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は追加するようにしましょう。
自動再生やコントローラーの有無など、必要に応じてオプションを追加します。

html

<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で直接非表示にします。

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もよく使うイベントですので、覚えておくと良いと思います。

##参考サイト
http://docs.videojs.com/docs/api/player.html#Methodsplay