Hello! I'm having trouble getting videos to load on iOS safari and I believe something may be wrongly configured with the media server.
I have two repositories. One correctly serves the media asset via byte-range requests, the other only does the initial 0-1 range request and then doesn't follow up with another request.
I know my HTML video element is properly configured because when I switch out the src strings, use a video (same asset) from one repo and then another, one renders properly on iOS and the other does not.
<video
className={classNames(s.mobileAsset, s.video)}
autoPlay
loop
muted
playsInline
// this URL doesn't work on iOS safari
src='https://bs-services-next.cdn.prismic.io/bs-services-next/fd37d6e6-f0fc-44bb-beb3-36a94d109abc_D+Remote+-+Portrait.mp4'
// this URL does work on iOS safari
// src='https://bsportfolio.cdn.prismic.io/bsportfolio/cc762353-8564-4f27-8f9f-3ce4883d77ad_M+Remote+-+Portrait.mp4'
width='100%'
/>
To reproduce, open iOS simulator and visit this PR preview where the video loads properly (second item in list). Then visit this PR preview where the video does not load and you'll see a green background.
Note that the videos load properly on firefox, chrome, desktop safari — this is only a problem on iOS. I'd appreciate any insight or advice if others have observed this behavior before as well.
Edit: Here are the network requests so you can see how the initial 0-1 byte request is sent, but then no follow up byte range requests are sent for the failing asset.
The working asset from bsportfolio.cdn.prismic.io
Initial 0-1 byte range request
Follow up range request
The failing asset from bs-services-next.cdn.prismic.io
No follow up range requests occur for the failing asset.