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

Posted 2023-02-19

【中文标题】使用视频标签从 HTML 中的特定时间戳开始视频（对于大型视频）

【英文标题】：Start the video from specific timestamp in HTML using video tag (for large videos)

【发布时间】：2021-10-20 13:03:10

【问题描述】：

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

<video id="myVideo"  ></video>

<script>

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

</script>
      

【问题讨论】：

您的“大”视频是否针对流媒体进行了优化（MOOV atom 移到开头）？如果没有，他们必须加载整个视频以获取允许搜索按预期工作的元数据。对于一个小视频，它可以发生得足够快，你不会注意到。

【参考方案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>

【讨论】：

是的，但这适用于大型视频吗？我的代码适用于小视频，但不适用于大视频。

你能想到为什么它不适用于大型视频吗？