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

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

○ホームページ機能で動画を公開している場合

現在レジューム機能はビデオグのホームページ機能をご利用いただいているお客様を対象にβ版としてご提供しております。レジューム機能のご利用をご希望のお客様はビデオグサポートまでご連絡ください。

○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
 },"*");
}

このセクションの記事

関連記事