Youtubeの動画を使ってジャンケンを作ってみる

Youtubeの動画を使って、ジャンケンのプログラムを書いてみました。

グー、チョキ、パーの3通りを出している動画を1つ用意します。

以前、Youtubeの動画を指定の時間から開始する方法をご紹介しましたが、

↑こちらの方法とは別で 「embed」 で動画を埋め込み、「start」 と 「end」 のプロパティを使ってみました。

動画を10秒から20秒まで再生したい場合は、↓こちらのような感じになります。

<iframe src="http://www.youtube.com/embed/XXXXXXXXXXX?start=10&end=20"></iframe>'

そして、ブラウザを開くたびに、

この <iframe を ランダムで3パターン作るように、Javascriptで書いてみました。

<script>

$(function(){

var min = 1;
var max = 3;

var rand = Math.floor( Math.random() * (max + 1 - min) ) + min ;

if(rand % 3 == 0){
s = 0;
e = 16;
}else if(rand % 3 == 1){
s = 17;
e = 32;
}else if(rand % 3 == 2){
s = 33;
e = 48;
}

$('#div20180111_2030_01').html('<iframe src="http://www.youtube.com/embed/q5pmq3SkBR4?start=' + s + '&end=' + e + '&controls=0&showinfo=1&rel=1" width="300" height="180" frameborder="0"></iframe>');

});

</script>

<div id="div20180111_2030_01" width="300" height="180"></div>

チョキは0秒から、グーは17秒から、パーは33秒から開始といったようにします。

これでブラウザをリロードするたびに、1つの動画から、グー、チョキ、パーがランダムで再生されます。

もし、リロードせずに変えたい場合はもう少し複雑になりますね。