Skip to content

Instantly share code, notes, and snippets.

@HideyukHira
Created November 11, 2023 13:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save HideyukHira/f96b07c5bef4d2254ecb353006c54847 to your computer and use it in GitHub Desktop.
Save HideyukHira/f96b07c5bef4d2254ecb353006c54847 to your computer and use it in GitHub Desktop.
jQuery html video play seamless
$(document).ready(function () {
//設定部分 再生データの配列
var mp4Array = [
"http://techslides.com/demos/sample-videos/small.mp4",
"http://techslides.com/demos/sample-videos/small.mp4"
];
//設定 ラップするコンテナdivのid指定
var tgtDiv = '#VideoContainer';
//メイン処理
mp4Array.forEach(makeVideoTag);
//メインが呼び出す関数
function makeVideoTag(val, index) {
$('<video>')
.attr({
id: 'video' + index,
src: val,
controls: true
})
.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();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment