htmlで動画をランダムに複数、連続再生する方法

Question

前提・実現したいこと

htmlで作成したサイトに動画を3つランダムで連続再生させたいと考えています。

該当のソースコード

こちらのソースでmovie01.mp4からmovie03.mp4を順番に表示することは出来たのですが、ランダムにすることが出来ず困っております。
どなたかお助けいただけないでしょうか。

<div id="bgMovie" class="movie_background movie_background_top">
	<video id="video1" src="movie/movie01.mp4" preload="auto" playsinline autoplay muted></video>
	<video id="video2" src="movie/movie02.mp4" preload="auto" playsinline autoplay muted></video>
	<video id="video3" src="movie/movie03.mp4" preload="auto" playsinline autoplay muted></video>
</div>

#video2, #video3{
    display: none;
}

$(function(){
    for (var i = 1; i <= 3;)
    {
        // 1
        $(function() {
            // 2
            var nextIndex = (i != 3) ? (i + 1) : (1);
            var $nextVideo = $("#video" + nextIndex);

            // 3
            $("#video" + i).on("ended", function() {
                $(this).hide();
                $nextVideo.show();

                $nextVideo.get(0).play();
            });
        })(i);
    }
});

Answer 1

$(function () {
    $("video").on("ended", function () {
        $(this).hide();
        $("#video" + Math.ceil(Math.random() * 3)).show().get(0).play();
    });
});

Comments

[zun30]

ランダムかつ連続再生になりました。
ありがとうございます。