I’m having troubles finding info on Umbraco 17’s default mp4 behavior, and what I would need to do to allow for adaptive bit streaming or how I should otherwise implement rendering mp4 videos on our website. A custom block necessary outside of a RTE? We use Azure Blob Storage for Media.
I have it rendering in a custom html block within an RTE, but it renders without adaptive bit streaming as well as I can’t get the “fullscreen” button to be enabled no matter what I do.
Note: I know we can use YouTube, and we do for the most part. I’m exploring.
There are two separate things here. Adaptive bitrate streaming isn’t something Umbraco or Blob Storage can do with a plain MP4. It needs the video encoding into multiple renditions with an HLS/DASH manifest, played via something like hls.js. You can do that yourself with ffmpeg and host the output on Blob Storage, or use a service like Mux, Cloudflare Stream or Bunny Stream (Azure Media Services was retired in 2024).
For plain MP4 playback, I link directly to the file on Azure Blob Storage, which supports range requests so playback starts quickly and seeking works. Also make sure the MP4 is encoded with the moov atom at the start (ffmpeg -movflags +faststart), otherwise the browser has to fetch most of the file before playing.
Rather than HTML in the RTE, I’d create a video block with a media picker and render <video controls playsinline preload="metadata"> in the partial. Fullscreen is enabled by default on native controls, so if it’s missing, check for controlslist="nofullscreen" or an iframe without allow="fullscreen". The RTE may also be stripping attributes.