Cuttlefish Docs
  • English

    • spz-video

    When to Use

    When you need to play local videos.

    Code Demonstration

    Basic Usage

    The most basic usage, use role="pause" to tag the play button, role="play" to tag the pause button.

    <spz-video
  layout="responsive"
  width="1280"
  height="720"
  hls="https://videodelivery.net/f0316062ddb9943617e309e848d71b93/manifest/video.m3u8"
  mp4="https://videodelivery.net/f0316062ddb9943617e309e848d71b93/downloads/default.mp4"
  poster="https://img.staticdj.com/63dc3070f040163824bc742cdad310dd.jpeg"
>
  <svg role="pause" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="M19.376 12.4158L8.77735 19.4816C8.54759 19.6348 8.23715 19.5727 8.08397 19.3429C8.02922 19.2608 8 19.1643 8 19.0656V4.93408C8 4.65794 8.22386 4.43408 8.5 4.43408C8.59871 4.43408 8.69522 4.4633 8.77735 4.51806L19.376 11.5838C19.6057 11.737 19.6678 12.0474 19.5146 12.2772C19.478 12.3321 19.4309 12.3792 19.376 12.4158Z" fill="currentColor"></path></svg>
  <svg role="play" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="M6 5H8V19H6V5ZM16 5H18V19H16V5Z" fill="currentColor"></path></svg>
</spz-video>

    Custom Control Panel

    Use the component's custom control panel style. Click to enter the global button, the video plays in full screen.

    <div id="video-zoom-container">
  <spz-video
    layout="responsive"
    width="1280"
    height="720"
    hls="https://videodelivery.net/f0316062ddb9943617e309e848d71b93/manifest/video.m3u8"
    mp4="https://videodelivery.net/f0316062ddb9943617e309e848d71b93/downloads/default.mp4"
    poster="https://img.staticdj.com/63dc3070f040163824bc742cdad310dd.jpeg"
    zoom
    loop
    @enterFull="video-zoom-container.toggleClass(class='video-fullscreen', force=true);"
    @exitFull="video-zoom-container.toggleClass(class='video-fullscreen', force=false);"
  ></spz-video>
</div>

    Properties

    PropertyDescriptionTypeDefault ValueRequired
    posterCover image srcstring-Yes
    srcVideo resource linkstring-Yes, unless there is an mp4 attribute
    mp4mp4 type video resource link, generates a video/mp4 type resource within videostring-Yes, unless there is a src attribute
    hlsGenerates an application/x-mpegURL type resource within videostring-No
    zoomIf this attribute exists, enable custom control panel--No
    loopIf this attribute exists, the video loops--No
    object-fitSame as CSS's object-fit property, refer to object-fit--No
    object-positionSame as CSS's object-position property, refer to object-position--No
    enter-fullWhen the video enters full-screen mode, this attribute will automatically be added to the body element---

    Methods

    play

    Play the video, no parameters required.

    pause

    Pause video playback, no parameters required.

    seekTo

    Jump frame to a certain point in time.

    ParameterDescriptionTypeRequired
    currentTimeJump frame to a point in time, unit: secondsnumberYes

    Events

    play

    This event will automatically trigger when the video goes from a paused state to playing.

    pause

    This event will automatically trigger when the video goes from playing to paused.

    ended

    This event will automatically trigger when the video ends (non-looping).

    enterFull

    This event will automatically trigger when the video enters full-screen playback.

    exitFull

    This event will automatically trigger when the video exits full-screen playback.

    AI Summary (LLM Ready)

    • Component ID: spz-video
    • One-line purpose: Video player.
    • Detected attribute rows: 0
    • Detected method subsections: 3
    • Detected event subsections: 5
    • Top attribute names: none (needs manual completion)
    • Top method names: play, pause, seekTo
    • Top event names: play, pause, ended, enterFull, exitFull
    • Reading order: start from usage/examples, then verify attributes, methods, and events.
    • Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/