24:I[307436,["/_next/static/immutable/chunks/1gchium7nww9r.js","/_next/static/immutable/chunks/2d7gr10yud7ll.js","/_next/static/immutable/chunks/2kyb8oum4hifz.js","/_next/static/immutable/chunks/17bc5e9cm9a-q.js","/_next/static/immutable/chunks/42sqmxmk3cnps.js","/_next/static/immutable/chunks/2-g5j69xga-j-.js","/_next/static/immutable/chunks/1vqnea-qk-oh0.js","/_next/static/immutable/chunks/0457ji1bpobon.js","/_next/static/immutable/chunks/2kc7ecqs15k_7.js","/_next/static/immutable/chunks/0a937jsg96ehe.js","/_next/static/immutable/chunks/1x71wnz52c5-i.js","/_next/static/immutable/chunks/3bmj1ccyv_bzu.js","/_next/static/immutable/chunks/3zyborr59s_3k.js","/_next/static/immutable/chunks/2iprwyxekay_3.js"],"Copy"] 25:Tb1d,/** The bare element, every `play` and `rest` it knows: when it plays by itself, and * what it shows when it stops. "page" hands the decision to a button of the page's. */ function TheElement() { const [play, setPlay] = React.useState("hover") const [rest, setRest] = React.useState<"hold" | "poster">("hold") const [playing, setPlaying] = React.useState(false) return (

setPlaying(v === "play")} options={[ { value: "hold", label: "hold", disabled: play !== "follow", }, { value: "play", label: "play", hint: "what a page's own clock or button would say; only under follow", disabled: play !== "follow", }, ]} />

) } 26:T5e98,

/** The bare element, every `play` and `rest` it knows: when it plays by itself, and
 *  what it shows when it stops. "page" hands the decision to a button of the page's. */
function TheElement() {
  const [play, setPlay] = React.useState<VideoPlay>("hover")
  const [rest, setRest] = React.useState<"hold" | "poster">("hold")
  const [playing, setPlaying] = React.useState(false)
  return (
    <div className="space-y-5">
      <div className="flex flex-wrap gap-x-5 gap-y-2">
        <Choice
          label="play"
          value={play}
          onChange={setPlay}
          options={[
            {
              value: "hover",
              label: "hover",
              hint: "plays while looked at (on touch, while on screen)",
            },
            {
              value: "visible",
              label: "visible",
              hint: "plays while on screen",
            },
            {
              value: "once",
              label: "once",
              hint: "plays once on arrival, then again on a fresh hover",
            },
            {
              value: "follow",
              label: "follow",
              hint: "plays when the page says so (the choice on the right), muted until someone turns the sound on",
            },
            {
              value: "manual",
              label: "manual",
              hint: "the person decides, with the browser's own controls",
            },
          ]}
        />
        <Choice
          label="rest"
          value={rest}
          onChange={setRest}
          options={[
            {
              value: "hold",
              label: "hold",
              hint: "stopped, it holds the frame it reached",
            },
            {
              value: "poster",
              label: "poster",
              hint: "stopped, it goes back to the start and the poster",
            },
          ]}
        />
        <Choice
          label="the page says"
          value={playing ? "play" : "hold"}
          onChange={(v) => setPlaying(v === "play")}
          options={[
            {
              value: "hold",
              label: "hold",
              disabled: play !== "follow",
            },
            {
              value: "play",
              label: "play",
              hint: "what a page's own clock or button would say; only under follow",
              disabled: play !== "follow",
            },
          ]}
        />
      </div>
      <Video
        key={`${play}-${rest}`}
        src="/bunny.mp4"
        poster="/video-poster.jpg"
        width={1280}
        height={720}
        play={play}
        playing={playing}
        rest={rest}
        loop
        pauseButton={play !== "manual" && play !== "follow"}
        label="Big Buck Bunny"
        className="w-full rounded-xl"
      />
    </div>
  )
}

<TheElement />

20:["$","div","element",{"data-slot":"code","data-material":"plain","data-compact":"$undefined","className":"ag-code","children":[["$","div",null,{"className":"ag-code-bar","children":[["$","span",null,{"className":"ag-code-name","children":"tsx"}],["$","$L24",null,{"value":"$25","label":true}]]}],["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$26"}}],false]}]