![]() ![]() Hls.isSupported() // false in iOS Safari Possible Option 3: Fallback to mp4 Link to Possible Option 3: Fallback to mp4Īs long as your video is short, the only reasonable solution if you want to get looping working in iOS Safari is to use an mp4 version of the video. What if we do the looping ourselves by listening for the video end and calling play() programmatically with a 10ms timeout? Possible Option 1: Skip the loop attribute? Link to Possible Option 1: Skip the loop attribute?Īlright, so the problem seems to be with the `loop` attribute specifically. If a bug exists on iOS Safari, it also exists in iOS Chrome, iOS Firefox, etc. *Note that there are other browsers available on iOS like Chrome and Firefox, but due to Apple’s App Store rules every browser in the App Store is simply a UI wrapper around the Safari rendering engine and JavaScript engine. ![]() ![]() This seems to only happen under these conditions: At the beginning of the 3rd loop you’ll see a visual stutter. Here’s a code sandbox that demonstrates the issue: Īs of now (April 2021), if you’re on an iPhone 12+ with iOS 14.3+ you should experience the bug when playing any of the videos. Is there something quirky about Mux’s HLS that is causing this behavior? Turns out it’s not, it happens with HLS sources of all flavors. Now we were really worried that it was something specific with Mux HLS videos. That didn’t help so then we went to plain ‘ol html with no JavaScript involved. The first culprit seemed like something weird going on with the react component, so we started peeling back those layers. This was first reported by Justin Greer on our team when he noticed it on a looping video on the Mux blog, and that’s where this journey began. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |