angular: HTML5 Video does not play in Safari iOS with NGSW
I’m submitting a…
[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:
Current behavior
When I add a simple video tag like this :
<video width="400" controls><source src="test2.mp4" type="video/mp4"> Your browser does not support HTML5 video.</video>
Only in Safari iOS if the SW is activate, the video is playing between 1 and 3 seconds before frozen.
Expected behavior
Video is playing.
Minimal reproduction of the problem with instructions
Create a new projet with :
ng new my-project --service-worker
Insert a video tag like above.
OR use this repository : https://github.com/fabienbranchel/angular-ios-safari-video-issue
Run the following command : ng build --prod at the root and deploy it where you can.
Try to play the video in Safari iOS. There is this bug.
Deactive the SW by removing your NGSW files from your server. Or create a new project without NGSW, whatever. Try o play the video in Safari iOS. It’s ok.
Environment
Angular version: 5.2.10
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [X] Safari (iOS)
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Platform: iOS 11.3
- Devices: iPhone 6S, iPad Mini 4About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 13
- Comments: 25 (5 by maintainers)
This might be related, so I will post it here:
I am currently building a site with SSR Vue.js (https://nuxtjs.org/) and using their PWA module (https://pwa.nuxtjs.org/) and the same exact problem happens. My video plays for 1–3s, then freezes — sometimes it won’t play at all. When I disable the PWA/Workbox module, it plays nicely and without problems.
I am aware that this is not related to Angular, but I am trying to fix my issue atm and it seems to be related to iOS + video + SW in general, so I thought I might leave this here. Still very confused about it.
@fabienbranchel
I’m a bit astonished that this issue is but into backlog as an inconvenience. As there seams to be not workaround the current choice is. PWA and no Videos OR No PWA and working Videos? If this is not a safari bug I think this is a major issue.
Update: I searched through webkit bug tracker and found this one: https://bugs.webkit.org/show_bug.cgi?id=184447 So it looks like it’s a bug in service worker implementation of angular, that doesn’t handle byte-range requests.
FYI, Phil Nash wrote an article about this issue : https://philna.sh/blog/2018/10/23/service-workers-beware-safaris-range-request/
I had to hack into ngsw-worker.js to
return;asap in theonFetchmethod … (sed replace in dockerfile … 😦 ) I don’t understand how this issue can only be “low / inconvenient” as it seems there are still no way to exclude some url from the service worker.@mixn you seriously, SERIOUSLY just saved my night… I am also using Nuxt for Vue and this thread popped up in my search.
I am building a site using nuxt, a nice-to-have was it as a PWA. We use nuxt at work so naturally i used Nuxt’s PWA module. Everything was smooth for a few days till i noticed videos stop playing in mobile safari and desktop safari. I couldn’t believe it. Localhost worked, http worked for the videos but https made them fail. i looked everywhere. I tried using netlify to test it out behind HTTPS. I bought a domain in Route53, set up an s3 bucket and cloudfront and got an AWS ACM SSL cert. I tried re-encoding the videos since a StackOverflow post mentioned certain types of encodings can cause the problem.
Your answer resolved everything. Thank you for taking the time to document that. You’re my hero for today, you just saved me so much time.
any possible workaround ? I had to desactivate entirely the SW because of this bug … I tried to exclude only videos from the ngsw-config but it didn’t work either …
Hi guys, …I added the recommended lines to polyfill.ts of this article and it solved the issue to me https://stackoverflow.com/questions/48689957/webrtc-does-not-work-in-angular-5-on-ios-safari
Possibly related to #21191 and/or #25865 (if the underlying Safari issue has to do with range requests - as suggested above).
Pierre feuille ciseaux
@splincode : This is the link : https://github.com/fabienbranchel/angular-ios-safari-video-issue
After few tests again, the video is playing during 3 seconds before frozen in the best case. Sometimes, you can’t play it at all.
I run the following command for test it :
ng build --prod