JavaScript PR

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);

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

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。