Bubbleで作る動画配信。動画停止位置からの視聴再開方法

前回の記事では、BubbleとVimeoを使って動画配信サイトを作る基本的な方法をご紹介しました。今回は、さらに便利な機能として「動画の視聴停止位置からの再生」を実装する方法を解説します。

動画サイトの作り方の基本については、前回の記事を参考にしてください。

BubbleとVimeoで作る！オリジナル動画配信サイト構築 - ノーコードｘAIで実現する最強DX

プログラミング知識不要！ノーコードツール「Bubble」と「Vimeo」を使って、あなただけの動画配信サイトを簡単に構築する方法を解説します。低コストで高品質な動画配信を実現し、ビジネスや情報発信に活用しましょう。

視聴停止位置からの再生機能とは？
完成イメージ
実装方法
まとめ

視聴停止位置からの再生機能とは？

動画を途中で停止した時、次に開いた時に前回停止した位置から再生できる機能です。動画一覧画面には「視聴中」といった表示も可能です。
Youtubeなど一般的に使われている機能なのでサービスを作る際には基本機能といっても過言ではないですよね。
ユーザーにとって便利なだけでなく、動画の視聴完了率を向上させる効果も期待できます。

完成イメージ

以下のように動画一覧に視聴中という表示を出せるようになります。
そしてもちろん、視聴再開時には途中から視聴を開始できます。わかりにくいですが、以下（２つ目）のイメージのように動画停止位置まで進んだ状態で表示され、再生ボタンを押せばそこから再生が開始されます。

今回、実装方法を説明しますが、思いのほか手こずりました。説明が難しいのでかなりわかりにくいかもしれません。。。わからないときはお問合せください。

実装方法

Vimeoでの途中からの再生開始方法

途中から動画を再生するには、以下のようにしてくれ、ということです。

特定のポイントから再生する動画リンクを共有するには、URLの末尾に #t= を追加し、その後に再生を始めたい部分のタイムコードを追加してください。

動画再生のキューが1分2秒から始まる動画の例です：https://vimeo.com/81400335#t=1m2s
Vimeoページ

特定のタイムコードで再生する

特定のポイントから再生する動画リンクを共有するには、URLの末尾に #t= を追加し、その後に再生を始めたい部分のタイムコードを追加してください。動画再生のキューが1分2秒から始まる動画の例です：埋め込み動画にもこのパラメーターの使用が...

上記を参考に今回は停止した位置の秒数を設定して途中から再開するように実装します。（例：#t=62s）

Toolboxプラグインのインストール

今回Toolboxの機能を使うのでインストールしておいてください。

Javascriptを使用し、Bubbleとの間でそのデータをやり取りするようにします。この時点でもう、なんだか、面倒そうですよね、、、
がんばりましょう！

データベース作成

視聴を停止した位置を保存するためのデータベースを作成します。
Vimeo_Videoというデータがありますが、これは前回の動画を見ておいてください。
別の動画で視聴完了を把握する方法も説明しますのでそれを見越して視聴完了の「yes/no」も登録しておきます。

Javascript to Bubbleのエレメントを配置

Javascriptで動画停止を把握し、それをBubble側に渡すため、Toolboxの機能を使います。
Javascript to Bubbleというエレメントを画面に配置してください。
設定は以下の画像の通りです。
bubble_fn_suffixはなんでもよいですがJavascriptのfunctionを識別する文字列を入れてください。ここでは”setVideoTime”を設定しています。
Trigger event, Publish valueもチェックしておいてください。Value typeはnumber（秒数を入れるので）です。

画面にHTML要素を配置し、Javascriptを設定

以下のコードを配置してください。
Vimeoのplayer.jsを使い、動画の停止位置を取得するようにしています。
ここでのポイントは「bubble_fn_setVideoTime(seconds);」です。bubble_fn_setVideoTimeとすることで、上記のJavascript to Bubbleと連携できます。
ここでは動画視聴完了も取得するようにしています。
もう、ノーコードじゃないですよね、、、長いですよね、、、ごめんなさい。

<script src="https://player.vimeo.com/api/player.js"></script>

<script>
  function initializeVimeoPlayer() {
    // iframeの読み込みを確実に待つためにsetTimeoutを使用
    setTimeout(function() {
      var iframes = document.querySelectorAll('iframe');

      // 各iframeに対してVimeo Playerを設定
      iframes.forEach(function(iframe) {
        var player = new Vimeo.Player(iframe);

        // 再生開始イベント
        player.on('play', function() {
          console.log('動画の再生が開始されました。');
        });

        // 一時停止イベントと現在の再生位置の取得
        player.on('pause', function() {
          player.getCurrentTime().then(function(seconds) {
            // 現在の再生位置を秒単位で取得し、Custom Stateにセット
            console.log('動画をストップしました。現在の位置: ' + seconds + '秒');

            // Custom Stateに値をセットするBubbleの関数
            bubble_fn_setVideoTime(seconds);
          }).catch(function(error) {
            console.error('再生位置の取得中にエラーが発生しました:', error);
          });
        });

        // 動画完了イベント
        player.on('ended', function() {
          console.log('動画の再生が完了しました。');
          // Bubbleの関数を呼び出して、動画完了状態を "yes" として設定
          bubble_fn_video_fin(true);
        });
      });
    }, 5000); // 5秒のウェイトを設定
  }

  // Vimeo APIの読み込みが完了するのを待つ
  if (typeof Vimeo !== 'undefined') {
    initializeVimeoPlayer();
  } else {
    // Vimeo APIが読み込まれるのを待つ
    var vimeoApiCheckInterval = setInterval(function() {
      if (typeof Vimeo !== 'undefined') {
        clearInterval(vimeoApiCheckInterval);
        initializeVimeoPlayer();
      }
    }, 100);
  }
</script>

Workflowを設定

Javascript　to　bubble eventを設定してください。これでJavascriptで停止位置を取得すると、Javascript to Bubble eventがトリガーされます。

Javascript to Bubbleに送られてきた値をデータベースに登録します。以下はテーブルを新規に作成していますが、既に作成済みであれば停止位置を上書くようにします。

これで停止位置をデータベースに保存するところまで完了です。やっと折り返し地点です。
実はここまでは結構簡単で、この後、途中から再生するところがかなり面倒でした。もしかするともっといいやり方があるかもしれません。問題なく動作はしますので、このようなやり方もあるんだなぁ、という参考にしてください。

動画を画面に配置するためのHTMLを作成

Page is loadedのタイミングで停止位置の秒数をデータベースから取得し、カスタムステートに保存

その流れでRun Javascriptにて画面上に配置するVimeoのURLを作成します。この時にURLに[#t=62s]といった秒数を挿入することになります。
単純にt=62sという数字を挿入するだけではうまく動かないので文字の変換なども合わせて実施しています。
Javascriptの値をBubbleで使うためにbubble_fn_get_ud_iframe()という関数を使っています。
Bubbleの画面上には再度、Javascripttobubbleのエレメントを配置しておきます。

// iframeを含むdiv要素のHTMLを取得する
var iframeHTML = properties.param1;

console.log("HTML:", iframeHTML);

// iframeのsrcを修正するパターン
var pattern = /(https:\/\/player\.vimeo\.com\/video\/\d+)\?/;
var newIframeHTML = iframeHTML.replace(pattern, '$1#{=Search for Vimeo_VideoStates:first item\'s stoppedTimes?}');
console.log('Modified HTML:', newIframeHTML);

// HTMLエンティティの置換を行う
var finalIframeHTML = newIframeHTML.replace(/&amp;/g, '&');
console.log('Final HTML to insert:', finalIframeHTML);

// 修正後のHTMLをBubbleのカスタム関数に渡す
bubble_fn_get_ud_iframe(finalIframeHTML);