前提・実現したいこと
op_m1.mp4(以下動画A)・op_m2.mp4(以下動画B)という2つの動画を
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と指定されている動画をループする、といった記述も試しに使用してみましたが
上手くいきませんでした。
回答1件
あなたの回答
tips
プレビュー