Added video playback feature

README.md

@@ -45,6 +45,10 @@ As a workaround for these issues, I've tested running a local proxy on my comput
 
 If you want to upgrade to the latest version, the only file you need to update is hamdash.html (do not overwrite your config.js file.)
 
+### 2024.06.08 Changelog:
+
+- Added support to play videos (along with the images.) Some modernized sites provide .mp4 videos instead of animated GIFS. Check updated demo!
+
 ### 2024.06.05 Changelog:
 
 - Added image loading error handling

hamdash.html

@@ -180,6 +180,16 @@ db   8D    88       88    88booo. 88.     db   8D
         height: 100%;
       }
 
+      .media {
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+      }
+
+      .hidden {
+        display: none;
+      }
+
       /* Style for the left menu options */
       .menu {
         display: grid;
@@ -190,7 +200,6 @@ db   8D    88       88    88booo. 88.     db   8D
         margin-top: 10vh;
         left: calc(-5.2vw - 0px);
         z-index: 2;
-        overflow: hidden;
         transition: 0.3s;
       }
 
@@ -292,6 +301,19 @@ db   8D Y8b  d8 88 `88.   .88.   88         88    db   8D
     help += "The content refreshes automatically every 5 minutes.\n";
     help += "Images rotates every 30 seconds.\n";
 
+    const videoExtensions = [".mp4", ".webm", ".ogg", ".ogv"];
+
+    function isVideo(src) {
+      return videoExtensions.some((ext) => src.includes(ext));
+    }
+
+    function getVideoType(src) {
+      if (src.includes(".mp4")) return "video/mp4";
+      if (src.includes(".webm")) return "video/webm";
+      if (src.includes(".ogg") || src.includes(".ogv")) return "video/ogg";
+      return "";
+    }
+
     // This function shows the embedded websites
     function MenuOpt(num) {
       // Stop refreshes
@@ -364,11 +386,16 @@ db   8D Y8b  d8 88 `88.   .88.   88         88    db   8D
         if (aIdx[i] > aIMG[i].length - 1) {
           aIdx[i] = 1;
         }
+        if (isVideo(aIMG[i][aIdx[i]])) {
+          // Is video, event is not attached to videos for now, do nothing
+        } else {
+          // Is image
           document.getElementById(targetElement.id).src = imgURL(
             aIMG[i][aIdx[i]]
           );
         }
       }
+    }
 
     // Automatically rotate images
     function slide() {
@@ -380,23 +407,25 @@ db   8D Y8b  d8 88 `88.   .88.   88         88    db   8D
             aIdx[i] = 1;
           }
           // console.log("Image" + i, " ", aIMG[i][aIdx[i]]);
+          if (isVideo(aIMG[i][aIdx[i]])) {
+            // Is video
+            vid = document.getElementById("Video" + i);
+            vid.src = imgURL(aIMG[i][aIdx[i]]);
+            vid.classList.remove("hidden");
+            // Hide image
+            img = document.getElementById("Image" + i);
+            img.classList.add("hidden");
+          } else {
+            // Is image
             img = document.getElementById("Image" + i);
             img.src = imgURL(aIMG[i][aIdx[i]]);
-          // img.style.opacity = 0;
-          // img.style.transform = "translateX(-100%)";
+            img.classList.remove("hidden");
+            // Hide video
+            vid = document.getElementById("Video" + i);
+            vid.classList.add("hidden");
+          }
         }
       });
-      // setTimeout(() => {
-      //   aIMG.forEach(function (innerArray, i) {
-      //     if (aIMG[i].length > 2) {
-      //       console.log("Image" + i);
-      //       img = document.getElementById("Image" + i);
-      //       // img.style.opacity = 1;
-      //       // img.style.transform = "translateX(0)";
-      //       img.src = imgURL(aIMG[i][aIdx[i]]);
-      //     }
-      //   });
-      // }, 1000);
     }
 
     function start() {
@@ -427,15 +456,35 @@ db   8D Y8b  d8 88 `88.   .88.   88         88    db   8D
       aIMG.forEach(function (innerArray, index) {
         // Create a new div element
         var newDiv = document.createElement("div");
-        // Set some properties for the new div
         newDiv.className = "image-container";
+        newDiv.id = `box${index}`;
+
+        // Add video placeholder containers
+        const video = document.createElement("video");
+        video.id = `Video${index}`;
+        video.classList.add("media", "hidden");
+        video.controls = true;
+        video.autoplay = true;
+        video.loop = true;
+        const source = document.createElement("source");
+
         // Create a new img element
         var newImg = document.createElement("img");
         newImg.id = `Image${index}`;
+        newImg.classList.add("hidden");
+
+        if (isVideo(innerArray[1])) {
+          // Is a video
+          video.classList.remove("hidden");
+          source.src = innerArray[1];
+          source.type = getVideoType(innerArray[1]);
+          video.appendChild(source);
+        } else {
+          // Is an image
+          newImg.classList.remove("hidden");
           newImg.src = imgURL(innerArray[1]);
           newImg.oncontextmenu = rotate;
           newImg.ondblclick = larger;
-        parentDiv.appendChild(newDiv);
           newImg.onerror = function () {
             text = "Failed to load image";
             console.log(text, this.src);
@@ -454,7 +503,11 @@ db   8D Y8b  d8 88 `88.   .88.   88         88    db   8D
               newImg.src = "data:image/svg+xml;base64," + window.btoa(el);
             }
           };
+        }
+        // append newDivs boxNN
+        newDiv.appendChild(video);
         newDiv.appendChild(newImg);
+        parentDiv.appendChild(newDiv);
         // Create a new div element for img title
         var newTtl = document.createElement("div");
         newTtl.className = "image-title";