音视频时间戳计算

Posted 2023-05-06

参考技术A 时间戳分为解码时间戳(DTS)和显示时间戳(PTS) 分别表示某一帧解码和显示相对于起始时间的时间戳
通常来说视频不带B帧的情况下 视频的DTS和PTS相同
带B帧的情况下 由于B帧是前后双向参考编码
B帧的解码时间戳可能会晚于它的显示时间戳 这种情况下DTS和PTS不同
音频的DTS和PTS则始终相同

计算时间戳时涉及到几个概念

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

【中文标题】使用视频标签从 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>

【讨论】：

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

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