A responsive video element with rendition switching, lazy loading and autopause.
The native <video>
element is good, but it lacks a few features that are
important for a great user experience. This custom element aims to fix that.
- The native
<video>
element doesn't supportsrcset
andsizes
attributes,lazy
loading orautopause
. - The native
poster
attribute doesn't supportsrcset
andsizes
attributes,lazy
loading orasync
decoding.
- Choose optimal rendition based on video container size
- Lazy load video when it enters the viewport
- Automatically pause video when it leaves the viewport
- Implements the proposed
HTMLMediaElement.videoRenditions
API - Supports a poster slot for a regular
<img>
element which offers more flexibility than the nativeposter
attribute - Progressive enhancement for
poster
andvideo
(optional) - Class mixin available for custom elements that extend
<video>
See compatible video mixins
<script type="module" src="https://cdn.jsdelivr.net/npm/responsive-video-element@0/+esm"></script>
<responsive-video
controls
loading="lazy"
srcset="
https://stream.mux.com/xLGf7y8cRquv7QXoDB02zEe6centwKfVmUOiPSY02JhCE/high.mp4 1920w,
https://stream.mux.com/xLGf7y8cRquv7QXoDB02zEe6centwKfVmUOiPSY02JhCE/medium.mp4 960w,
https://stream.mux.com/xLGf7y8cRquv7QXoDB02zEe6centwKfVmUOiPSY02JhCE/low.mp4 640w
"
>
<img
slot="poster"
loading="lazy"
decoding="async"
srcset="
https://image.mux.com/xLGf7y8cRquv7QXoDB02zEe6centwKfVmUOiPSY02JhCE/thumbnail.jpg?time=0&width=1920 1920w,
https://image.mux.com/xLGf7y8cRquv7QXoDB02zEe6centwKfVmUOiPSY02JhCE/thumbnail.jpg?time=0&width=1600 1600w,
https://image.mux.com/xLGf7y8cRquv7QXoDB02zEe6centwKfVmUOiPSY02JhCE/thumbnail.jpg?time=0&width=960 960w,
https://image.mux.com/xLGf7y8cRquv7QXoDB02zEe6centwKfVmUOiPSY02JhCE/thumbnail.jpg?time=0&width=640 640w
"
sizes="(width < 800px) 100vw, 800px"
>
<video slot="media" controls></video>
</responsive-video>
- Media Chrome Your media player's dancing suit. 🕺
-
<castable-video>
Cast your video element to the big screen with ease! -
<hls-video>
A custom element for playing HTTP Live Streaming (HLS) videos. -
<media-playlist>
A custom element for playing through a set of audio and video elements. -
media-offset
Configures a media element to lock playback to a defined segment of the media. -
media-group
Sync and control multiple audio and/or video elements. - Missing something? Open an issue
Some of these features might come to the native <video>
element in the future: