Recent searches
Search options
Administered by:
@develwithoutacause@techhub.socialAre there any good resources about how to render #videos optimized for the #web?
* What container formats and codecs are widely supported?
* What codecs should be preferred?
* Is #VP9 on #WebP better than #H264 in #MP4?
* Do we still need H264 for compatibility?
* Are there other codecs I should consider shipping? #AVIF? #H265? Do we ever need #GIF anymore?
* What tools can optimize these videos to shrink them as much as possible?
* Best practices for accessible videos? It feels weird that `alt` isn't a thing, but are captions supposed to address that?
I feel like I have a good sense of how to do images effectively after watching enough #HTTP203, but I'm less clear on effective video deployments.
Good article on lazy loading videos: https://web.dev/lazy-loading-video/
Unfortunately lazy auto-played videos requires #JavaScript enabled to function and has no fallback, the video just doesn't play if you disable JS.
I hoped I could work around that with `<noscript />` like:
```html
<video>
<source data-lazy-src="/video.mp4">
<noscript>
<source src="/video.mp4">
</noscript>
</video>
```
Unfortunately that doesn't seem to work as `<video />` seems to require `<source />` tags to be direct descendants.
We really need `loading="lazy"` for videos.
I ended up making a component which renders its content lazily based on an `IntersectionObserver`. This is compatible with `<video />` tags and works with `<noscript />`. You also need to make sure to render with `aspect-ratio` to avoid CLS when the video loads in.
It's definitely more complicated than it should be, but it's a nice performance improvement.
https://github.com/dgp1130/blog/blob/8192e7ff0cbc31ee94f5ca3b9dda0fb4ef7cf6a3/src/client/components/lazy.ts
https://github.com/dgp1130/blog/blob/8192e7ff0cbc31ee94f5ca3b9dda0fb4ef7cf6a3/src/11ty/markdown/video.ts#L108-L111
@develwithoutacause Following this thread, I'm curious as well!
Are you just wanting to embed a video on a page (e.g. with a <video> tag), or do you also want to support streaming, with variable video resolutions? Configuring videos using HLS is its own bucket of worms.
(I've learned a lot working with #owncast, which is a fantastic streaming tool, but I believe distributes everything as H264)
@mattdsteele I'm mainly just embedding a handful of videos into my site hosted on a #CDN. I'm pretty sure streaming is supported out of the box, though I haven't looked into variable quality.
For now, I'm just trying to use the native `<video />` tag in the ideal way possible, not building my own streaming platform or anything. Though I'm not sure what features of `<video />` or `<source />` I should be taking advantage of that I'm not.
@develwithoutacause https://caniuse.com is quite handy to check what codec and containers are supported
@wader Yeah, that's what I've been using, but I get the impression video codec support is a lot more complicated than that.
@develwithoutacause Very much so. If compatibility is prio i would say mp4 with h264 and AAC LC is safest bet. If open source/royalty free is important webm with vp9/opus. Quality/bitrate-wise i would suggest to do CRF encoding with default quality level unless you have some specific needs.