Random bg video and audio
authorCameron Ball <cameron@moodle.com>
Fri, 11 Dec 2020 09:14:01 +0000 (17:14 +0800)
committerCameron Ball <cameron@moodle.com>
Fri, 11 Dec 2020 09:14:01 +0000 (17:14 +0800)
index.html
video/2.mp4 [new file with mode: 0644]
video/3.mp4 [new file with mode: 0644]
video/4.mp4 [new file with mode: 0644]

index 17e4daa..a446c22 100644 (file)
@@ -53,7 +53,7 @@
         </style>
          </head>
          <body>
-        <iframe width="560" height="315" src="https://www.youtube.com/embed/B_QCJSTxqfI?controls=0&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        <iframe width="560" height="315" id="audio" src="https://www.youtube.com/embed/B_QCJSTxqfI?controls=0&autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         <div id="timer"></div>
         <video autoplay muted loop id="video">
             <source src="video/1.mp4" type="video/mp4">
      var units = ['weeks', 'days', 'hours', 'minutes', 'seconds', 'milliseconds'];
      var delay = 20;
 
-     /* var bgImageNo = Math.ceil(Math.random() * 2);
-      * document.body.style.backgroundImage = "url('img/" + bgImageNo + ".jpg')"; */
+     var vidElement = document.getElementById('video');
+     var activeVideo = Math.floor((Math.random() * 4) + 1);
+     vidElement.src = "video/" + activeVideo + ".mp4";
+     vidElement.addEventListener('ended', function(e) {
+         // update the active video index
+         activeVideo = (++activeVideo) % vidSources.length;
+         if(activeVideo === vidSources.length){
+             activeVideo = 0;
+         }
+
+         vidElement.src = vidSources[activeVideo];
+         vidElement.play();
+     });
 
      var vid = document.getElementById("video");
      vid.playbackRate = 0.5;
 
+     var youtubeIds = ['VG1gcnCVJ8M', 'B_QCJSTxqfI'];
+     var youtubeId = youtubeIds[Math.floor(Math.random() * youtubeIds.length)];
+     var iframe = document.getElementById('audio');
+     iframe.src = "https://www.youtube.com/embed/" + youtubeId + "?controls=0&autoplay=1"
+
      function pad(n, width, z) {
          z = z || '0';
          n = n + '';
      function tick() {
          var timespan = countdown(null, new Date('January 4, 2021 03:47:00'), countdown.ALL);
          var text = timespan.value < 0 ? '<span class="num">Welcome to Perth!</span>' : units.reduce((c, v) => c + formatUnit(timespan, v), "");
-         timerElement.innerHTML = text;
-         setTimeout(tick, delay);
+     timerElement.innerHTML = text;
+     setTimeout(tick, delay);
      }
 
      setTimeout(tick, delay);
diff --git a/video/2.mp4 b/video/2.mp4
new file mode 100644 (file)
index 0000000..23075c5
Binary files /dev/null and b/video/2.mp4 differ
diff --git a/video/3.mp4 b/video/3.mp4
new file mode 100644 (file)
index 0000000..3d6f662
Binary files /dev/null and b/video/3.mp4 differ
diff --git a/video/4.mp4 b/video/4.mp4
new file mode 100644 (file)
index 0000000..d8958a0
Binary files /dev/null and b/video/4.mp4 differ