FIX: Allow safari to load and autoplay videos in posts

FIX: Allow safari to load and autoplay videos in posts

This improves the reloading workaround in a few ways:

  • Multiple videos in posts are now reloaded. Previously only the first was reloaded.
  • An empty poster string is treated the same as a missing attribute
  • If the video is set to autoplay, it will be reloaded (and therefore autoplayed correctly)
diff --git a/app/assets/javascripts/discourse/app/initializers/post-decorations.js b/app/assets/javascripts/discourse/app/initializers/post-decorations.js
index ce297d7..98fa982 100644
--- a/app/assets/javascripts/discourse/app/initializers/post-decorations.js
+++ b/app/assets/javascripts/discourse/app/initializers/post-decorations.js
@@ -56,14 +56,20 @@ export default {
       if (caps.isSafari || caps.isIOS) {
         api.decorateCookedElement(
           elem => {
-            const video = elem.querySelector("video");
-            if (video && !video.poster) {
+            elem.querySelectorAll("video").forEach(video => {
+              if (video.poster && video.poster !== "" && !video.autoplay)
+                return;
+
               const source = video.querySelector("source");
               if (source) {
-                // this tricks Safari into loading the video preview
+                // In post-cooked.js, we create the video element in a detached DOM
+                // then adopt it into to the real DOM.
+                // This confuses safari, and preloading/autoplay do not happen.
+
+                // Calling `.load()` tricks Safari into loading the video element correctly
                 source.parentElement.load();
               }
-            }
+            });
           },
           { id: "safari-video-poster", afterAdopt: true, onlyStream: true }
         );

GitHub sha: 5f7839f0

1 Like