From 5f7839f0a44e11f0835d1838e38709cca9b95073 Mon Sep 17 00:00:00 2001 From: David Taylor Date: Mon, 17 Aug 2020 23:48:36 +0100 Subject: [PATCH] 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) --- .../discourse/app/initializers/post-decorations.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/discourse/app/initializers/post-decorations.js b/app/assets/javascripts/discourse/app/initializers/post-decorations.js index ce297d71484..98fa982cc4f 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 } );