Hls video streaming on iOS/Safari
To your question:
Is it some kind of a wishful thinking getting HLS & WebGL to play on iOS?
Yes, wishful thinking :-) The problem/issue/bug is with Apple, not any library. No matter what the JS library, A-Frame
, Three
, etc, this will always be an issue on any browser in iOS (all browsers on iOS are basically wrappers for Safari), and OSX Safari.
The issue is this (from my understanding):
- At some point in the history of WebGL, there were restrictions on cross-origin content (videos, images, etc). I can't find a source for this, but I remember reading it somewhere, so this might not be 100% accurate.
- Recently (a couple years ago? 2015?) all major browsers came to the conclusion that cross-origin media for use in WebGL was safe. Except Apple/Safari.
- For most browsers, the
crossorigin
attribute on a<video>
element could signal that this content came from another source. In Safari, for whatever reason, this attribute is ignored or not implemented. In fact, it looks like WebKit, which Safari is based on, fixed this as far back as 2015, but Apple still does not implement it. Even Apple refuses to comment on any progress.
Possible workarounds:
- WebGL on Safari works with progressive (not a stream like HLS/Dash)
.mp4
videos. Check out any 360 video on Facebook (website, not app) in iOS/Safari, and you'll note the source is an.mp4
. - Use HLS (or Dash), but play the video flat, without WebGL. Check out any 360 video on YouTube (website, not app), and I think they are using HLS or Dash, but the point is they stream the video, whereas Facebook doesn't.
Here's a good starting point to the real issue: link.
Here's another detailed thread: link.
Why is my HLS stream infinitely loading on iOS 15 safari but works fine on iOS 14?
In the end I couldn't solve the problem with nginx-rtmp module and I simply switched to Node-Media-Server https://github.com/illuspas/Node-Media-Server
With this, the streams work great on all iOS versions
Playback fails on iOS and Mac-Safari for HLS url that has colon
Turns out the issue was with the content of the m3u8.
#EXT-X-STREAM-INF:BANDWIDTH=1128000,CODECS="H264,AAC",RESOLUTION=1024x576
Apple devices didn't like the CODECS that were being specified. The provider removed the CODECS part and the playback started working.
HLS never plays on iPhone with Nginx fed by ffmpeg. Works on Desktop Safari and iPad
I solved this issue by moving away from Nginx entirely and using node-media-server instead
Related Topics
Xcode 8.3 Swift Version Error (Swift_Version) in Objective C Project
How to Change Select Box Background Without Losing The Right Arrow on Mobile Safari
Background Image Not Displaying Correctly in iOS
Revealviewcontroller() Always Returns Nil
Bootstrap Columns with Flexbox Are Not Taking Proper Width on iOS and Safari
How to Keep Animated Gifs Animated While Scrolling on iOS Devices
Using Auto Layout to Have UIlabel and UItextfield Next to Each Other
Sprite Kit Collision Detection
Convert Rgb Image to 1 Channel Image (Black/White)
How to Set Gradient Background Transparency on iOS Safari
Cancel All Operations + Afnetworking 3.0
Translate Just 4 Lines of Code from Objective C to Swift (Pointers)
Swift 4.2 Make Bottom of Tableview Move Up When Keyboard Shows
Mobile Safari: Inertia Scrolling on Body and Minimal UI Behavior
Tabbarcontroller Adding Custom Button Not Clickable Issue