mp4/webm

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';
-    }
+    })
 })

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)

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'