feat: add support for transition video, play only one video, loop fir…

…st video
UpDownLeftDie · Apr 13, 2021 · 6ce1b3c · 6ce1b3c
1 parent 964aa01
commit 6ce1b3c
Showing 1 changed file with 42 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -2,15 +2,32 @@
 
 <head>
   <script>
-    const videoFolder = '../path/to/videos/folder'
+    // Set the path to your videos here (enter: "" if this is in the same file as your videos)
+    let videoFolder = '../path/to/videos/folder/';
+    // Add your list of videos or mp3s here
     const videosList = [
       'video1.mp4',
-      'video2.mp4'
-    ]
+      'video2.mp4',
+      'audio-works-too.mp3'
+    ];
+
+    // This video will be played after EVERY video
+    // Set it to a single mp4 file or set to "" if you don't want to use it
+    const transitionVideo = ''; // example: 'transition.mp4'
+    // Set to true if you only want one video to play and then stop
+    const playOnlyOne = false;
+    // Set to true if you want to keep looping the first video selected (does nothing if playOnlyOne is true)
+    const loopFirstVideo = false;
+
+    ///////////////////////////
+    // DON'T EDIT BELOW THIS //
+    //////////////////////////
+    videoFolder = videoFolder.substring(videoFolder.length -1) === '/' || videoFolder === "" ? videoFolder : `${videoFolder}/`;
     const videos = shuffleArr(videosList);
     let count = 0;
     let player = null;
     let mp4Source = null;
+    let isTransition = true;
 
     function shuffleArr(a) {
       var j, x, i;
@@ -23,17 +40,31 @@
       return a;
     }
 
-    function setVideoPlayer(player, i) {
-      player.setAttribute("src", `${videoFolder}${videos[i]}`);
+    function setVideoPlayer(video) {
+      if (!video) video = `${videoFolder}${videos[0]}`;
+      if (typeof video === 'number') video = `${videoFolder}${videos[video]}`;
+      mp4Source.setAttribute("src", video);
       player.load();
       player.play();
     }
 
-    function playNext(e) {
-      if (!e) e = window.event;
-      count++;
+    function playNext() {
+      if(!loopFirstVideo) {
+        if (!transitionVideo || !isTransition) {
+          count++;
+        }
+      }
+
       if (count > videos.length - 1) count = 0;
-      setVideoPlayer(player, count);
+      if (!playOnlyOne) {
+        if (transitionVideo && transitionVideo !== "" && isTransition) {
+          setVideoPlayer(`${videoFolder}${transitionVideo}`);
+          isTransition = false;
+        } else {
+          setVideoPlayer(count);
+          isTransition = true;
+        }
+      }
     }
   </script>
   <style>
@@ -52,9 +83,9 @@
   </video>
   <script>
     player = document.getElementById("videoPlayer");
-    player.addEventListener('ended', playNext, false);
+    player.addEventListener("ended", playNext, {passive: true});
     mp4Source = document.getElementById("mp4Source");
-    setVideoPlayer(player, 0);
+    setVideoPlayer();
   </script>
 </body>