Autoplay

Starts the video when it's ready, and falls back to muted playback with a Tap to unmute chip when the browser refuses sound. The demo refuses sound on purpose, so you'll see the chip whatever your browser would have allowed. Press it to turn sound on.

"use client";import { autoplay } from "react-video-kit/autoplay";import { definePlugin } from "react-video-kit/core";import { VideoPlayer } from "react-video-kit/player";// For this demo only. It refuses the first try with sound, as a browser would, so this// page never starts with sound. Leave it out of your app, where the browser decides.const refuseSoundOnce = definePlugin("refuse-sound-once", () => ({  attach(_context, video, scope) {    // Viewers who prefer reduced motion aren't started, so their first press must work.    let asked = matchMedia("(prefers-reduced-motion: reduce)").matches;    video.play = () => {      if (asked || video.muted) return HTMLMediaElement.prototype.play.call(video);      asked = true;      return Promise.reject(new DOMException("Refused for this demo", "NotAllowedError"));    };    scope.add(() => Reflect.deleteProperty(video, "play"));  },}));const plugins = [refuseSoundOnce(), autoplay()];export default function Autoplay() {  return (    <div className="flex flex-col gap-3">      <VideoPlayer src="/media/sample-720.mp4" poster="/media/poster.jpg" plugins={plugins} load="visible" />      <p className="text-sm text-current opacity-80">        On your site, the browser decides whether sound is allowed. This demo refuses it once, so you        always see the fallback: the video plays muted and offers Tap to unmute. Reload the page to see        it again. If your system is set to reduce motion, it waits for you to press Play instead.      </p>    </div>  );}

Usage

import { autoplay } from "react-video-kit/autoplay";import { VideoPlayer } from "react-video-kit/player";const plugins = [autoplay()];<VideoPlayer src="/video.mp4" plugins={plugins} />;

To stay paused rather than mute when the browser refuses sound:

autoplay({ muted: false });

To start for viewers who prefer reduced motion as well:

autoplay({ ignoreReducedMotion: true });

What it tries

The browser's autoplay policy decides what's allowed, and your code can't override it. The plugin asks in this order, once the source is ready:

1. Reduced motion. If the viewer prefers reduced motion, it stops here and they get the Play button, unless you set ignoreReducedMotion.
2. With sound. It calls play. If that works, there's nothing more to do.
3. Muted. If the browser refused with NotAllowedError, it mutes, calls play again, and shows the chip. With muted: false, it stops before this step.
4. The Play button. If muted playback is refused too, it restores the mute setting and leaves the viewer with the normal Play button.

Offer sound from your own control

UnmuteChip appears on its own through the overlay slot. To offer sound somewhere else, read the same state and call unmute:

"use client";import { useCommands, useVideoState } from "react-video-kit";import { autoplay } from "react-video-kit/autoplay";function TurnSoundOn() {  const visible = useVideoState(    autoplay,    (state, media) => state.mutedFallback && media.muted && !media.paused  );  const { unmute } = useCommands(autoplay);  if (!visible) return null;  return <button onClick={() => unmute()}>Turn sound on</button>;}

Behaviour

• It tries once for each source, so every new source starts the same way, including each playlist item.
• It only falls back on NotAllowedError. Any other failure leaves the video paused.
• If the player was already muted, muted playback shows no chip, because there's no sound to offer back.
• Unmuting any way, with unmute or the volume control, clears mutedFallback, so muting again later doesn't bring the chip back.
• The chip only shows while the video is playing.
• The root has data-autoplay-muted while mutedFallback is set.
• It waits for the player to load, so with load="visible" it starts when the player scrolls into view.
• The persistence plugin doesn't save the fallback's mute, so the next visit tries sound again.

API

Options

State

Read it with useVideoState(autoplay, (state) => …).

Commands

Call them with useCommands(autoplay).

Parts