Cuttlefish Docs
  • 简体中文

    • spz-video 视频

    何时使用

    需要播放本地视频时。

    代码演示

    基本用法

    最基本用法，使用 role="pause" 标记播放按钮，role="play" 标记暂停按钮。

    <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>

    自定义控制面板

    使用组件自定义的控制面板样式。点击进入全局按钮，视频全屏播放。

    <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>

    属性

    属性名说明类型默认值是否必需
    poster封面图srcstring-是
    src视频资源链接string-是，除非有 mp4 属性
    mp4mp4类型视频资源链接，在video内生成一个 video/mp4 类型的资源string-是，除非有 src 属性
    hls在video内生成一个 application/x-mpegURL 类型的资源string-否
    autoplay如果存在该属性自动播放视频--否
    zoom如果该属性存在，启用自定义控制面板--否
    loop如果该属性存在，视频循环播放--否
    object-fit与CSS的 object-fit 属性一样，参考 object-fit--否
    object-position与CSS的 object-position 属性一样，参考 object-position--否
    enter-full当视频进入全屏模式时，body 元素上会自动加上该属性---

    方法

    play

    播放视频，不需要参数。

    pause

    暂停视频播放，不需要参数。

    seekTo

    跳帧到某个时间点。

    参数名说明类型是否必需
    currentTime跳帧到一个时间点，单位：秒number是

    事件

    play

    当视频从暂停状态到播放状态时该事件会自动触发。

    pause

    当视频从播放状态到暂停状态时该事件会自动触发。

    ended

    当视频播放结束时（非循环播放）该事件会自动触发。

    enterFull

    当视频进入全屏播放时该事件会自动触发。

    exitFull

    当视频退出全屏播放时该事件会自动触发。

    AI 摘要（LLM Ready）

    • 组件标识：spz-video
    • 用途一句话：视频播放器。
    • 可识别属性条目：10
    • 可识别方法小节：3
    • 可识别事件小节：5
    • 关键属性名（Top）：poster、src、mp4、hls、autoplay、zoom
    • 关键方法名（Top）：play、pause、seekTo
    • 关键事件名（Top）：play、pause、ended、enterFull、exitFull
    • 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
    • 关联文档：/guide/actions-and-events/ 、/guide/layouts/