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で書いてみました。
$(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('');
});
チョキは0秒から、グーは17秒から、パーは33秒から開始といったようにします。
これでブラウザをリロードするたびに、1つの動画から、グー、チョキ、パーがランダムで再生されます。
もし、リロードせずに変えたい場合はもう少し複雑になりますね。