レジューム機能の利用方法 – ビデオグお客様サポート

〇追記

2020年9月11日：ホームページ機能でのレジューム機能（ベータ版）は、不具合があるため提供を停止しました。

レジューム機能は、ビデオグプレイヤーをiframeで利用している場合に、視聴者が動画の視聴を止める直前の視聴状態を保存しておいて、次に動画を再生したときに以前視聴したところから復帰できるようにする機能になります。

〇設定方法

プレイヤーのiframeタグを自社サイトに埋め込んで動画を公開しているお客様は、プレーヤーコマンド機能とプレイヤーイベント機能を利用することでレジューム機能と同様の機能を実装いただけます。

実装手順は以下になります。

再生ポイントを「再生秒数」イベントで取得し、ローカルストレージに保存しておく。
次回視聴者がページにアクセスした際にローカルストレージの値から「シーク」コマンドを実行する。

以上です。

◆サンプル
※一部JQueryを利用しています。
※以下サンプルはお客様開発環境によっては動作しない場合がありますので、非サポートになります。

window.addEventListener("message", function(ev) {
 var org_data = ev.data;
 if (
  typeof org_data != "string" ||
  org_data.indexOf("videog_player_event") < 0
 ) {
  return; // ビデオグプレーヤーイベント以外は処理しない
 }

 // 通知データの "signature=videog_player_event&name=timeupdate&value=再生秒数" という文字列を分解して配列化
 var ev_strings = org_data.split("&");

 // オブジェクトに変換する
 var ev_data = {};
 for (var i = 0; i < ev_strings.length; i++) {
  var parts = ev_strings[i].split("=", 2);
  var label = parts[0];
  var data = decodeURIComponent(parts[1]);
  ev_data[label] = data;
 }

(function() {
  var d = new $.Deferred();
  setTimeout(function() {
   // 再生時にlocalStorageに保存してある再生秒数にseekする。
   getPlayEvent(ev_data);
   d.resolve();
  }, 50);
  return d.promise();
  })().then(function() {
   var d = new $.Deferred();
   setTimeout(function() {
   // 再生時間をlocalStorageに保存する
   getTimeupdateEvent(ev_data);
   d.resolve();
  }, 1000);
  return d.promise();
 });
});

function getTimeupdateEvent(ev_data) {
 if (ev_data.name == "timeupdate") {
  localStorage.setItem("resume_time", ev_data.value);
 }
}

function getPlayEvent(ev_data) {
 if (ev_data.name == "play") {
  var resumeTime = localStorage.getItem("resume_time");
  var player01 = document.getElementById("player01");
  getSeekCommand(resumeTime);
 }
}

function getSeekCommand(seekTime) {
 var player01 = document.getElementById("player01");

player01.contentWindow.postMessage(
 {
 signature: "videog_player_command",
 name: "seek",
 value: seekTime
 },"*");
}

このセクションの記事

関連記事