html5 原生 video 标签视频定位(跳转到指定位置)

Yonjay257248

已于 2023-05-22 16:23:00 修改

阅读量8.2k

点赞数 2

文章标签： javascript html5 前端 html 音视频

于 2022-03-04 23:04:44 首次发布

本文链接：https://blog.csdn.net/qq_44134222/article/details/123287124

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <button type="button">定位视频</button>
  <video width="500" duration controls
    src="https://totoroschool.oss-cn-hangzhou.aliyuncs.com/webm/%E5%9F%8E%E5%B8%82%E5%A4%9C%E6%99%AF9.mp4"></video>
</body>
<script>
  const video = document.querySelector('video')
  const button = document.querySelector('input')
  video.ontimeupdate = e => {
    console.log(e)
    // 这里可以在进度条变化的时候打印视频播放的位置
  }
  button.onclick = function fixedPoint() {
    video.currentTime = 0.4567
    // 0.4567 是一个时间戳 , 表示 0.4567 秒的位置
    console.log("video");
    
  }
</script>

</html>