前端之video实用技巧

video

关于自动播放

检测是否可以自动播放

 video.play().then(() => {
    console.log("自动播放")
  }).catch((error) => {
    console.log("不能自动播放", error)
  })

如何自动播放

1. 设置静音<video muted></video>

移动端全屏处理

1. <video playsinline="true"></video>

画中画

当前页面是否支持画中画?

document.pictureInPictureEnabled 不支持或者禁用都是false

如何 开启/关闭 画中画?

1. 开启

const openPip = async () => {
  try {
    let pip = await video.value?.requestPictureInPicture()
  } catch (error) {
    console.log(error)
  }
}

2. 关闭

  document.exitPictureInPicture()

开启画中画失败的原因？

1. 需要用户主动操作
2. 需要视频下载meta信息之后
3. video设置了disablePictureInPicture
4. 页面不支持

如何禁止画中画?

<video disablePictureInPicture></video>

事件

1. 进入画中画enterpictureinpicture
2. 退出画中画leavepictureinpicture

检测当前页面上是否存在画中画?

/**
 * 有则返回开启画中画的video
 * 无则返回null
 */
console.log(document.pictureInPictureElement)