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:
parent
e2e51ee348
commit
5f7839f0a4
|
@ -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 }
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue