We have a video component which uses a media picker to choose and select a .MP4 video from the media section in backoffice. We are rendering the video using the below code:

<video class="player" autoplay loop muted playsinline>
    <source src="@content.Video.Url()" type="video/mp4" />
</video>

The video is rendering and loading fine on all browsers except safari i.e. the video does not load/play in iOS device using safari browser. Not sure what is going wrong. I have tried it on iOS version 16.4. Can someone please help.

If this is rendering on other browsers fine, then I wouldn’t say this is an Umbraco issue, I checked https://caniuse.com/video and it seems fine. I’m not a FE expert so I’m not sure, hopefully someone else can help.

Thanks for your input @Lewis Heaton . Yes it seems to be supportrd on Safari. However its not working on iOS devices using Safari browsers. Any help please?

@Debasish Whats the video's codec ? I believe there are some issues with h264 on Safari specificially

Yes, there is an issue in Umbraco 7 on Cloud (we have a couple) where a wrong header is sent that makes video not work in Safari (desktop and mobile). If the issue is "just" that the video isn't autoplaying, it could be because of the power settings (preserve battery, low power mode etc.)

@Ambert Im not really sure what is the video's codec. I tried checking it on my windows PC by going to Properties->Details, but nothing seems to be mentioned there. I am using umbraco cloud and I have uploaded the .MP4 video in umbraco backoffice. So am I right in thinking its using cloudflare behind the scenes?

Good question.. Not sure how they configured cloudflare, I'd assume they'd bypass caching though.. https://community.cloudflare.com/t/videos-on-website-dont-play-only-affects-ios-users/569261

Yep - I've tried to see if I could somehow "fix" the header with an outbound rule, but to no avail.

The link above specifically addresses that issue though

Yes - but we don't have access to Cloud's Cloudflare setup

Ah ofc 🙂

They won't (can't) do anything for Umbraco 7 sites on Cloud 😁

xD

"Time" and "to upgrade" does not fit well here 😆

Typical developer issues

@Ambert @Ambert we are on umbraco v10

Yeah, that's weird — can you play the video by hitting it's URL directly?

@Chriztian Steinmeier If I just try the video URL https://ourdomain.com/media/inbb1ota/boat.mp4 in the browserstack simulator, the video does not load either. I get a broken player.

no console logs ?