On iOS web browsers alone, the videos start showing unknown error after a few seconds. This seems to be a new issue and occurring since yesterday. Even my older deployments show this problem.
What steps have you taken to resolve the issue?
To eliminate all other variables, I forced a raw signed URL that works on desktop browsers and forced the value for the mobile component. The issue can still be seen. The inference is that the same video URL that works on desktop and android does not work on iOS web browsers. I have tried Safari, Chrome and Firefox. I am running iOS 18.01 on an iPhone 12. I have also checked the same on another iPhone 12 mini.
I am using the Stream player right now but I also tried using Vidstack, same issues shows up there also.
There seem to be 100s of additional requests compared to desktop. Looks like it is fetching all of the audio and video segment wise. The mobile browser downloads close to 300MB of data compared to only about 30MB in desktop.
I was able to debug the issue.
My webpage had over 10 players loading parallel. Over 500MB of data was downloaded in the background. At some point it looks like iOS decides to abort network traffic to this page and all the streams get killed.
I resolved the problem by attaching the URL to the iframe upon user click on a thumbnail. This way only the desired videos load significantly reducing the bandwidth usage.
Feature request to the Cloudflare team: Implement load on play
Currently we only have support for lazy loading. This works differently in every browser and takes control away from the developer. A load on play feature would show a thumbnail until the user hits the play button and only then start streaming.
Why?
With autoplay enabled and set in your Web browser as well?
Was it Stream Player default or Player API, or your own implementation, or rather playing as a video HTML5 element (which was uploaded as mp4?)
I was using iframe until now which does not have any buffering configuration. So even without autoplay and without the user pressing the play button, if the src field of the iframe is set to the video URL, it starts buffering and downloads all the segments of the video.
I have moved on to using hls.js which uses the video element instead of iframe and also gives a lot more control to the user. You can set maxBufferSize for example and also play\pause on command. The Stream Player API did not work reliably for me.
