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)
This commit is contained in:
David Taylor 2020-08-17 23:48:36 +01:00
parent e2e51ee348
commit 5f7839f0a4
No known key found for this signature in database
GPG Key ID: 46904C18B1D3F434
1 changed files with 10 additions and 4 deletions

View File

@ -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 }
);