動画＋コンテンツのランダム表示を実装してみた【JS】

今回はコンテンツ＋動画をランダムで表示して動画を自動再生させてみました。
サイトのメインビジュアルとかに使えるかもしれないですね。

 

動画＋コンテンツのランダム表示を実装してみた

JSで動画＋コンテンツをランダム表示させてみます。

まずはHTMLから。

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

 

「#random_content」内にランダムに表示するコンテンツを挿入します。

 

続いてJSを書いていきます。

$(function () {
var elements = [
	'<div class="mv_wrap"><div class="mv_img"><img src="imgパス01" alt=""/></div><div class="mv"><video id="bg-video" src="動画パス01" poster="" muted loop playsinline></video></div></div>',
	'<div class="mv_wrap"><div class="mv_img"><img src="imgパス02" alt=""/></div><div class="mv"><video id="bg-video" src="動画パス02" poster="" muted loop playsinline></video></div></div>',
	'<div class="mv_wrap"><div class="mv_img"><img src="imgパス03" alt=""/></div><div class="mv"><video id="bg-video" src="動画パス03" poster="" muted loop playsinline></video></div></div>'
];
var randElm = elements[Math.floor(Math.random() * elements.length)];
$('#random_content').html(randElm);

var videoOn = document.getElementById('bg-video');
videoOn.play();
});

 

こんな感じ。
「play()」を忘れると自動再生されないっぽいので忘れず入力しましょう！
「var elements」の配列を変更することで好きにHTMLや画像・テキスト・動画を変更できます。