JS・jQuery

動画+コンテンツのランダム表示を実装してみた【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や画像・テキスト・動画を変更できます。

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

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)