Video not loading on iOS

[adamo]

Describe your problem 🧐

Hi. When switching between pages the html video isn't loading. As far as I can tell it only happens on iOS devices (tested in chrome, safari). Has anyone had this issue?

What is your question? 🙋‍♀️

Is there a workaround for this? I've tried using .mov instead of mp4 but that didn't change anything.

URL to reduced test case 🔗

https://cedo.depcore.agency

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for answers to my question
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[hirasso]

Hi @adamo , your problem is very likely not related to swup. A thing that always makes sense in these cases is to try to get it to work without swup first. In your case, you could try to add the playsinline attribute to the video:

<video autoplay muted loop playsinline poster="https://cedo.depcore.agency/themes/cedo//assets/images/FFFFFF-0.png">
    <source src="https://cedo.depcore.agency/themes/cedo//assets/videos/1.mp4" type="video/mp4">
</video>

[adamo]

I've added this previously but it didn't work the video wasn't loading either way. That's why i thought it could be a swup related problem/

[hirasso]

Thanks for the clarification!

[daun]

Does it also fail to load on initial load or only after page transitions triggered by swup?

[adamo]

Only after transition

[hirasso]

Safari has a history of blocking autoplaying video quite aggressively. Blame it on the advertising industry ;)

From the docs:

By default, autoplay executes only if the video doesn’t contain an audio track, or if the video element includes the muted attribute. Video playback pauses if the element gains an audio track, becomes unmuted without user interaction, or if the video is no longer onscreen (either by CSS or due to the user scrolling the page). [...]

Following this, I'd try three things.

1. Using handbrake or a similar tool, try completely removing the audio track from the video. I can vaguely remember a case some time ago where only the muted attribute didn't work, I actually had to get rid of the audio track in the actual file.
2. If this doesn't fix it, you could try to start the video using JavaScript as soon as it's fully faded in (not tested myself):

/** runs each time swup has fully rendered and faded in a page */
swup.hooks.on('visit:end', () => {
  document.querySelectorAll('video[autoplay]').forEach(el => el.play());
});

3. If this still doesn't work, my final idea would be to try to programmatically start the video using an IntersectionObserver.

Safari on iOS has been changing their handling of videos quite a few times, so don't expect this to continue to work next year, should you get it to work now...

[adamo]

The videos on first run load normally and are autoplayed (the muted attribute is added). Just after usung swup they don't load.

[hirasso]

@adamo I went ahead and created a reduced test case using your video. Turns out it had something to do with your video file. Using your original file, autoplay didn't work for me after a swup page visit, either (click on "Next Page", click on "Back"). I used handbrake to convert the file:

• removed the audio track:

• ticked "Web optimized":

This is the converted video file:

https://swup-demo-video-autoplay--hirasso.repl.co/video-1-handbrake.mp4

After I switched out the newly encoded video, it's now working for me. I'm afraid I don't know what exactly fixed it, but it definitely has something to do with a combination of these:

1. Safari on iOS
2. DOM updated by JavaScript
3. The encoding of the video file

Reduced test cases really are the gold standard for debugging issues like these. We'll need to advertise them more in the future.

[adamo]

Thank you very much. I'll try this.

[adamo]

That didn't work for me so I've finally ended up doing what the scripts plugin does but for video and hooked into page:view this script

       const videos = document.querySelectorAll("video");
        videos.forEach((video) => {
            video.load();
        });

[hirasso]

Side note: chrome on iOS is also just safari due to bad behaviour by Apple ☹️

[daun]

One thing to double-check is that the device in questions isn't in power-saving mode when testing this behavior. I ran into this once and it took me a few hours to figure out why it wouldn't work on the unplugged MacBook but worked fine on the stationary iMac.

[mathieupreaud]

I had the same issue on mobile (tested with iOS), but also on computer (Mac). In my case, the issue didn't occur with Swup v3, it only happened with Swup v4.

[daun]

Interesting. Can you share a link to a demo site or reproduction somewhere? I'd like to look into this if it turns out to be a regression in v4 after all.

[mathieupreaud]

Unfortunately, right now I don't have any demo site to reproduce the issue.