Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

ブライトコーブの埋め込み用タグには大きく分けて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

un-t
インターネットビジネスを中心とした企画、設計、デザイン、システム、運用、マーケティング、リサーチ等の総合的なクリエイティブファームです。
https://www.un-t.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away