【jQuery】アクセスごとに動画とポスター画像をランダム表示させる方法

ページにアクセスするたび動画とポスター画像を変える動きをサイトに実装する際に調べたので、
自分のメモとしても残しておきたいと思います。jQueryを用いて実装しました。

まず、デモを確認されたいかたは以下ページをご覧ください。

デモページを確認する

コード

コードは以下の通り。

HTML

<video class="random_video" poster="movie1.jpg" src="movie1.mp4"></video>

※video タグ内のautoplayなどは割愛しています。

jQuery

var videos = [
    ['movie1.mp4', 'movie1.jpg'],
    ['movie2.mp4', 'movie2.jpg'],
    ['movie3.mp4', 'movie3.jpg'],
    ['movie4.mp4', 'movie4.jpg']
];
var randomVideo = videos[Math.floor(Math.random() * videos.length)];

$(".random_video").attr({"src":randomVideo[0],"poster":randomVideo[1]});

解説

順を追って解説していきたいと思います。

var videos = [
    ['movie1.mp4', 'movie1.jpg'],
    ['movie2.mp4', 'movie2.jpg'],
    ['movie3.mp4', 'movie3.jpg'],
    ['movie4.mp4', 'movie4.jpg']
];

まず、var videosで動画とポスター画像を指定します。

var randomVideo = videos[Math.floor(Math.random() * videos.length)];

次に、var randomVideoでは上のvar videosで指定した何番目の動画・ポスター画像を表示するかを計算します。
0から1未満の少数を返すMath.random()と要素の数を取得するvideos.lengthをかけます。
それらで出た数値をMath.floorで囲うことで、いわゆる小数点を切り捨ててくれvar videosの1から4行目がランダムで指定されます。

数字に置き換えてみると、以下のようになります。（説明のためMath.random()の少数はキリのいい数にしています）

Math.floor(0.01 * 4 = 0.04) = 0
Math.floor(0.99 * 4 = 3.96) = 3

余談ですが、
var videos内の要素は4つあるのに、3までの数値しか返ってこないから4番目の要素は指定されないの？と思われた人もいるのではないでしょうか。
大丈夫です。[]で囲ったものを指定するときは0からと決まっているのでこれらの計算式で4つの要素を指定することができるのです。

var videos = [
['movie1.mp4', 'movie1.jpg'], →0番目
['movie2.mp4', 'movie2.jpg'], →1番目
['movie3.mp4', 'movie3.jpg'], →2番目
['movie4.mp4', 'movie4.jpg'] →3番目
];

$(".random_video").attr({"src":randomVideo[0],"poster":randomVideo[1]});

最後に、クラス名「random_video」のついたvideoタグのsrcとposterを指定して完成です。

Javascriptの知識が豊富ではないため、調べながらjQueryを用いて試行錯誤しています。
今回は動画で実装しましたが、同様の方法でいろいろ活用できると思うので機会があれば試していきたいと思います。

この記事を書いた人

宮野 聡美

Front-end Engineer