JavaScriptで動画をランダム再生させる

JavaScriptで動画をランダム再生させる方法を紹介します。
MVに動画を使ってランダムで動画を表示したいという要望など二対応できるかと思います。

では早速書いていきましょう！

JavaScriptで動画をランダム再生

まずはHTML。
ID「random_content」の中にvideoタグをJavaScriptでランダムにタグを導入します。

<div id="random_content"></div>

「elements」の中にランダムで表示させる動画のタグを書いています。
動画がもっと多い場合は追加してください。
また、classなどは変更しても問題ありません。

const randomMoviePlay = () => {
    const elements = [
        '<video class="video" width="320" height="240" controls autoplay muted><source src="movie1.mp4" type="video/mp4"></video>',
        '<video class="video" width="320" height="240" controls autoplay muted><source src="movie2.mp4" type="video/mp4"></video>',
        '<video class="video" width="320" height="240" controls autoplay muted><source src="movie3.mp4" type="video/mp4"></video>'
    ];

    function playRandomVideo() {
        let randElm = elements[Math.floor(Math.random() * elements.length)];
        document.getElementById('random_content').innerHTML = randElm;
        const videoOn = document.querySelector('#random_content .video');
        videoOn.play();

        videoOn.addEventListener('ended', function() {
            playRandomVideo();
        });
    }

    playRandomVideo();
};

document.addEventListener('DOMContentLoaded', randomMoviePlay);

これだけで読み込むたびにランダムで動画が再生されるかと思います。
またランダムに再生し、動画が終わったときに再度ランダムに、動画を読み込み次の動画が再生されるようになっています。