From b2fdabeb592da0548ba05dd9c7dea457b5bb9407 Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Fri, 22 Oct 2021 09:21:43 +0100
Subject: [PATCH] mp4/webm

---
 app/static/js/animation.js |  2 +-
 app/static/js/ascroll.js   | 21 +++++++++++++++++++--
 app/static/js/film.js      | 18 +++++++++++++++++-
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/app/static/js/animation.js b/app/static/js/animation.js
index 6c85c89..82191ca 100644
--- a/app/static/js/animation.js
+++ b/app/static/js/animation.js
@@ -8,5 +8,5 @@ document.querySelectorAll('.animated-title').forEach(element => {
     var randomDuration = Math.random() * animationDuration;
     element.querySelectorAll('.text').forEach(text => {
         text.style.animationDelay = -randomDuration + 's';
-    }
+    })
 })
diff --git a/app/static/js/ascroll.js b/app/static/js/ascroll.js
index 7dc4aa5..af3beb8 100644
--- a/app/static/js/ascroll.js
+++ b/app/static/js/ascroll.js
@@ -2,6 +2,7 @@ var cache = cache || {}
 var layer = 'descriptions'
 var baseURL = 'https://pad.ma'
 var imageResolution = 480
+var videoExtension
 
 async function pandoraAPI(action, data) {
     var url = baseURL + '/api/'
@@ -21,13 +22,29 @@ async function pandoraAPI(action, data) {
     return cache[key]
 }
 
+function setVideoSrc(video, src) {
+    var ext
+    if (!videoExtension) {
+        [
+            ['video/mp4; codecs="avc1.42E01E, mp4a.40.2"', '.mp4'],
+            ['video/webm; codecs="vp8, vorbis"', '.webm'],
+        ].forEach(opt => {
+            if (videoExtension) { return }
+            if (video.canPlayType(opt[0]).replace('no', '')) {
+                videoExtension = opt[1]
+            }
+        })
+    }
+    video.src = src.replace('.webm', videoExtension)
+}
+
 function updatePlayer(video, frame, currentTime, out, src) {
     var rect = frame.getBoundingClientRect();
     video.style.opacity = 0
     video.style.top =  (rect.top + window.scrollY) + 'px'
     video.style.display = 'block';
     if (src) {
-        video.src = src
+        setVideoSrc(video, src)
     }
     //video.poster = frame.querySelector('img').src
     var muted = video.muted
@@ -225,7 +242,7 @@ function loadItem(config) {
         var video = document.createElement('video')
         video.classList.add('player')
         video.muted = true
-        video.src = `${baseURL}/${config.item}/480p.webm`
+        setVideoSrc(video, `${baseURL}/${config.item}/480p.webm`)
         video.addEventListener('timeupdate', timeupdate)
         video.addEventListener('touchstart', showOverlay)
         video.addEventListener('mouseover', showOverlay)
diff --git a/app/static/js/film.js b/app/static/js/film.js
index 668e0e3..9810714 100644
--- a/app/static/js/film.js
+++ b/app/static/js/film.js
@@ -1,7 +1,23 @@
+function setVideoSrc(video, src) {
+    var ext
+    if (!videoExtension) {
+        [
+            ['video/mp4; codecs="avc1.42E01E, mp4a.40.2"', '.mp4'],
+            ['video/webm; codecs="vp8, vorbis"', '.webm'],
+        ].forEach(opt => {
+            if (videoExtension) { return }
+            if (video.canPlayType(opt[0]).replace('no', '')) {
+                videoExtension = opt[1]
+            }
+        })
+    }
+    video.src = src.replace('.webm', videoExtension)
+}
+
 document.querySelector('a#play-fullscreen').addEventListener('click', event => {
     var video = document.createElement('video')
     video.classList.add('player')
-    video.src = 'https://pad.ma/' + film.id + '/480p.webm'
+    setVideoSrc(video, 'https://pad.ma/' + film.id + '/480p.webm')
     video.controls = true
     document.querySelector('main').appendChild(video)
     video.style.display = 'none'