videojs
replay broken on ios 16 safari with application/x-mpegURL
Description
When using the type="application/x-mpegURL" and a .m3u8 video file, the video plays fine on ios 16 safari but when the video ends, the play button doesn't replay like expected. I don't see this issue on ios 16 safari using type="video/mp4".
I'm assuming this is related to the new native ios player shipped with ios 16.
Reduced test case
https://codepen.io/leo-paz/pen/WNYEJWJ
Steps to reproduce
- View the codepen on ios 16 safari, get to end of video and try to hit big play button. Nothing happens
- Switch the
<source>to the commented out mp4 source - View the codepen on ios 16 safari, this time the big play button when the video ends replays the video.
Errors
No response
What version of Video.js are you using?
8.2.0 and 8.3.0
Video.js plugins used.
No response
What browser(s) including version(s) does this occur with?
n/a
What OS(es) and version(s) does this occur with?
ios 16 safari
I don't have a new enough iPhone here, although replay does work on XCode's Simulator (albeit with Simulator's current bug that it doesn't show video) and also on a real iPad OS 16.
That Codepen however is loading a very ol version of video.js - version 5 script and css are in the pen's properties - so isn't a good baseline to test. Can you reproduce with an example based off https://codepen.io/gkatsev/pen/GwZegv?editors=1000#0 ?
@mister-ben I was able to reproduce basing off of that codepen. My new one here: https://codepen.io/leo-paz/pen/eYQGeXE?editors=1000
That page also has no issues replaying on simulator. Maybe try stepping though the play_() method via Safari's dev tools.
@mister-ben thanks for getting back. I was able to get other people with ios 16 safari to run the code pen and they saw the same thing i'm seeing. Weird that it works on simulator. I'm trying to step through play_() on safari but seems it doesn't even get hit at the end. It does get hit when I initially play the video though.
@mister-ben any other ideas here? I tried placing break points in several places but whenever I clicked play in the native player they aren't usually hit except handleTechPlay but it doesn't have much logic other than changing classes. I'm assuming because this is a new native UI with some different event handlers?
I'm starting to think this is an issue with the native player?
You're using the native button, not closing and using Video.js's button? That's an issue with Safari itself then.
How about exiting fullscreen when the video ends?
player.on('ended', function() {
player.exitFullscreen();
});
WebKit recently landed a fix for a similar bug: 251119: HLS videos sometimes fail to reach "ended" state & cannot be restarted, which should be included in STP 163 and later. Please take a look and see whether or not your test case reproduces there. If so, please file a bug at bugs.webkit.org and we'll take a look.
@jernoble Thanks for taking the time to reply. I just want to make sure I'm understanding correctly but is that only available for macOS? I'm seeing this on Iphone iOS 16.5.1 safari.
STP is only available on macOS, however, both beta versions of macOS Sonoma and iOS 17 should include this fix as well.