動画Aを再生後、スムーズに動画Bを再生、Bだけを無限ループ再生させたい。

Question

前提・実現したいこと

op_m1.mp4（以下動画A）・op_m2.mp4（以下動画B）という２つの動画を
html5のvideoタグで、動画A再生後削除、その場所に動画Bを無限ループで再生、
といったことをしたいのですが、どう指定すべきか分からず
私自身、その方面に明るくないため、何卒、お知恵を拝借させてください。

発生している問題・エラーメッセージ

下記記述のため、動画A再生後、動画Bをスムーズに再生することはできましたが
動画Bをループさせることができません。

該当のソースコード

主に以下のページを参考にしています。
https://samuraishockdo.info/ja/webmagazine/code/html5video2seamless

【js】
$(document).ready(function() {

        //設定部分 再生データの配列
        var mp4Array = [
        "images/op_m1.mp4", 
        "images/op_m2.mp4"
        ];
        //設定 ラップするコンテナdivのid指定
        var tgtDiv = '#VideoContainer';

        //メイン処理
        mp4Array.forEach(makeVideoTag);
        //メインが呼び出す関数
        function makeVideoTag(val, index) {
          $('<video preload="auto" autoplay muted playsinline loop>').attr({
            id : 'video' + index,
            src : val,
            controls : false
          }).appendTo($(tgtDiv)).hide();

          if (index !== mp4Array.length - 1) {
            $(tgtDiv + ' #video' + index).on('ended', function(event) {
              $(this).hide();
              $(this).next().show();
              $(this).next()[0].play();
            });
          }
        }

        //HTML処理 生成したHTML<video>1個目を表示化
        $(tgtDiv + ' video:eq(0)').show();

      });
}

【html】
<div id="VideoContainer"></div>

試したこと

js動作中は、動画Aには#video0、動画Bには#video1のidが付与されるので、
video1と指定されている動画をループする、といった記述も試しに使用してみましたが
上手くいきませんでした。

Comments

[overdoser]

コピペの出典ぐらいちゃんと書いておいたら？
https://samuraishockdo.info/ja/webmagazine/code/html5video2seamless

[mykyofit]

記入漏れがあり大変失礼しました。
そちらで間違いありませんのと、質問内追記しました。
ご指摘ありがとうございます。

Answer 1

動画aとbが一緒になっている動画cが作れる場合でのアイデアです。

動画cの再生終了イベント後にループ再生時させたい位置にシークして再度再生させてはいかが？

イベント
https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/ended_event

シーク。違いはよく知りませんので調査して結果を教えてください。
https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/currentTime
https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/fastSeek

Comments

[mykyofit]

ありがとうございます、参考に試してみたいと思います。