HLS streaming doesn't work on Safari / iOS

[supermafete]

Hi there,

I'm developing a live streaming PWA using angular and videogular2. Everything works fine, desktop web browsers, android browsers, etc... except in iOS 11. The console shows this error.

We see a 404 (not found) error loading hls.min.js.map. I think this is because hls.js is a Media Source Extension, and that MSE's are not supported by iOS. BTW, it doesn't work on chrome nor firefox neither, although the important browser for PWAs is Safari.

So, how can I implement HLS with videogular2 in iOS devices without doing browser version checks?

Thanks.

[Elecash]

HLS is supported natively in iOS and Safari, you should not need HLS plugin at all I think.

BTW, Chrome and Firefox (and other browsers) in iOS are using the Safari Webkit, so if you solve your problem in one browser, it would be fixed in all of them.

[supermafete]

Sure, the thing is I want my code agnostic from the browser. If videogular2 hls does not work in iOS, then I must check it at every load and use videogular2 for some users and native for others. Maybe videogular2 can do this check natively and be completely agnostic.

For example, I have my stream navigation implemented in videogular2. This thing forces me to do another stream navigation system for iOS, so I can't use videogular2 in all systems.

[Elecash]

Makes sense! I thought HLS did that for me.

Ok, I'll take a look to it and try to work on a fix.

[supermafete]

Gracias Raúl! ;)

I'll keeping an eye to this thread.

[Elecash]

I've tested with my iPad on iOS 10 and it works as expected on the demo website:
https://videogular.github.io/videogular2-showroom/#/streaming-player

I can change between VOD and HLS without any problem. Maybe is a problem with your HLS source file, can you try this one?

https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_varian.m3u8

[wdspider]

@Elecash while I can confirm that the HLS stream on the linked showroom page plays on iPhone 7 (iOS 11.3), I'm having trouble finding the source of the showroom to confirm whether that showroom page is also using VgControls.

My experience has been that videogular2 will successfully play HLS videos on iOS so long as you use the default controls. It is the VgPlayPause control that does not work on iOS, likely due to it attempting to always use MSE rather than falling back to native.

[Elecash]

@wdspider I can confirm that it also works with Videogular controls in iOS with HLS and VOD.

[wdspider]

Yep, something somewhere has changed since I had to code into my project the work-around of showing the default controls (instead of the custom ones) when on Safari. Both the default and the custom controls do seem to work now.

[Sampath-Lokuge]

I have the same issue. Do you have any solution here? @supermafete

[supermafete]

Not really. Finally I decided to develop the app natively. Sorry I can’t help you, but I’m still thinking this is a videogular2 issue.

…

El 26 ene 2019, a las 15:02, Sampath Lokuge ***@***.***> escribió: I have the same issue. Do you have any solution here? @supermafete — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[Sampath-Lokuge]

@supermafete Thanks.
I'm working on Ionic 3 mobile app. Now it is working perfectly fine on iOS devices. iPhoneX 12.1 and etc.

I use these versions:

"videogular2": "6.1.1",
"@types/core-js": "2.5.0",
"hls.js": "0.12.2",

.html

<vg-player>
<video #media [vgMedia]="media" [vgHls]="videogularSrc" preload="metadata" id="my-video" muted playsinline autoplay controls crossorigin>
</video>
</vg-player>

[supermafete]

@Sampath-Lokuge are you getting troubles when trying to play streams with restricted CORS?

[Sampath-Lokuge]

@supermafete No. I have used crossorigin attribute. We get the stream using Wowza service.

Wowza: https://www.wowza.com/products/streaming-cloud