Playing background videos on mobile

I want to be able to play the Cloudflare videos as background elements, mainly so I can use background cover and set the video to fit elements. Using the CF player means you get black bars as the aspect ratio changes…

I have read through the docs https://developers.cloudflare.com/stream/viewing-videos/using-own-player and there have been several topics on here (eg: Need to use video in HTML5 video tag). Using HLS works great on desktop but there seems to be no mobile browser support for it. Which is an issue.

So are there any alternatives here?

Do I use the download API to get the mp4 file which would then be no problem to use? Perhaps using Javascript to check for HLS support and then if not trigger an Ajax request to get the mp4 file?

You have good suggestions. If the file is short, just going with the downloads mp4 would also be fine.

So in the end I went with the VideoJS player (https://videojs.com). They have HLS support which works cross browser and mobile and I was able to use CSS to style up the

2 Likes

Awesome! Thank you for sharing what solution you ended up going with.

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.