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	封面图src	string	-	是
src	视频资源链接	string	-	是，除非有 `mp4` 属性
mp4	mp4类型视频资源链接，在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

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