A lightweight web component helper for HTML5 videos. Intended for use with muted
by default HTML5 videos.
npm install @zachleat/video-radio-star
<video-radio-star>
<video src="./media/flower.mp4" muted controls controlsList="nodownload" playsinline disablePictureInPicture disableRemotePlayback></video>
<button type="button" data-play>Play</button>
<button type="button" data-pause>Pause</button>
<button type="button" data-mute>Toggle Mute</button>
</video-radio-star>
<script type="module" src="video-radio-star.js"></script>
-
Add classes for styling for:
radiostar-enhanced
(component initialized)radiostar-muted
radiostar-playing
radiostar-paused
radiostar-ended
-
Only start playing when the video is visible in the viewport with
data-visible-autoplay
(via IntersectionObserver) Make sure you leave off theautoplay
attribute in your markup.- Optionally conditional on media query, e.g.
data-visible-autoplay="(min-width: 48em)
- The
muted
attribute is required when using this feature. - Don’t use the
autoplay
attribute.
- Optionally conditional on media query, e.g.
-
Automatically pause video when it scrolls out of view (via IntersectionObserver)
-
Works as expected with
preload="none"
. -
Sets
preload="none"
when SaveData is true. -
Disables
autoplay
whenprefers-reduced-motion
is enabled -
Use your own external mute/play/pause controls by adding
data-mute
,data-play
, ordata-pause
respectively to one or more<button>
elements. -
iOS note: as of iOS version 14.4, even if you use
<track default>
iOS will not display captions by default unless it is enabled in Settings. Go to Settings -> Accessibility -> Subtitles & Captioning -> and make sure the Closed Captions + SDH option is selected.