update for webm

display mp4 for safari and webm for all other browser
ltonetwork · Feb 2, 2024 · ab20d51 · ab20d51
1 parent 1d521e0
commit ab20d51
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -3,9 +3,9 @@
 
 <head>
   <meta charset="utf-8">
+  <meta name="viewport"="width"="devicewidth", initial-=1.0>
   <title></title>
   <meta name="description" content="">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta property="og:title" content="">
   <meta property="og:type" content="">
@@ -55,10 +55,12 @@ <h1><span>Real World Assets</span>Meet Web3 </h1></p>
         <a href="https://demo.ownables.info/" class="button">Try Demo</a>
       </div>
       <div class="sdk-section__video">
-       <video width="960" height="671" loop autoplay muted playsinline>
-        <source src="/img/RWAS.webm" type=video/webm>
-         <source src="/img/WALLET_ANIM_RWAs.mp4" type=video/mp4>
-      </video>
+        <video id="webmSource" class="responsive-video" width=100% height="auto" loop autoplay muted playsinline id="myVideo">
+          <source src="img/RWAS.webm" type=video/webm >
+        </video>
+        <video id="mp4Source" class="responsive-video" width=100% height="auto" loop autoplay muted playsinline id="myVideo">
+         <source id="mp4Source" src="img/WALLET_ANIM_RWAs.mp4" type=video/mp4 >
+        </video>
       </div>
 </div>
 

diff --git a/js/app.js b/js/app.js
@@ -27,4 +27,35 @@ document.addEventListener('click', function (event) {
 		}
 	}
 
-}, false);
+}, false);
+
+navigator.saysWho = (() => {
+	const { userAgent } = navigator;
+	let match = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
+
+	if (/trident/i.test(match[1])) {
+	  return 'IE';
+	}
+
+	if (match[1] === 'Chrome') {
+	  let temp = userAgent.match(/\b(OPR|Edge|Edg)\/(\d+)/);
+
+	  if (temp !== null) {
+		return temp[0].replace('OPR', 'Opera').replace('Edg', 'Edge');
+	  }
+	}
+
+	return match[1];
+  })();
+
+  const webmSource = document.getElementById("webmSource");
+  const mp4Source = document.getElementById("mp4Source");
+
+// checking navigator.saysWho for Safari, webm does not work proper on safari, so change to mp4
+  if (navigator.saysWho.includes("Safari")) {
+	mp4Source.style.display = "block";
+	webmSource.remove()
+  } else {
+	webmSource.style.display = "block";
+	mp4Source.remove()
+  }