使用视频标签从 HTML 中的特定时间戳开始播放视频（对于大型视频）

Question

我想从特定位置或特定时间戳开始和结束视频（例如 15 秒开始和 20 秒结束）。下面是我的代码，它适用于小视频，但不适用于大视频。谁能知道它如何处理大视频？

<video id="myVideo" width="740px" height="665px"></video>

<script>

var myVideo = document.getElementById('myVideo');
myVideo.setAttribute('src', '../../static/videos/abc.mp4#t=15,20');

</script>

Answer 1

这是您要找的吗？

const video = document.querySelector("video")

const bounds = {
 min: duration => 20,
 max: duration => duration - 20
}

let intervalId

function clamp() {
  const min = bounds.min(video.duration)
  const max = bounds.max(video.duration)
  
  if (video.currentTime < min) {
    video.currentTime = min
  }

  if (video.currentTime > max) {
    video.currentTime = max
    video.pause()
  }
}

video.addEventListener("play", event => {
  clearInterval(intervalId)
  intervalId = setInterval(clamp, 100)
})

video.addEventListener("pause", event => {
  clearInterval(intervalId)
})

video {
  width: 100%;
}

<video controls preload="metadata">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"/>
    Video not supported.
</video>

使用视频标签从 HTML 中的特定时间戳开始播放视频（对于大型视频）

Start the video from specific timestamp in HTML using video tag (for large videos)

html

javascript

video

timestamp

web