微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

HTML视频部分加载:寻求尚未加载的时间会冻结播放器并从头开始重播

如何解决HTML视频部分加载:寻求尚未加载的时间会冻结播放器并从头开始重播

尝试将我们的NodeJS服务器设置为接受部分加载,以使用HTML元素进行媒体流传输。添加功能是为了使正在运行的视频能够进行擦洗/搜索,但是我遇到了一个有趣的问题,但我一直无法找到解决方案。

这是确定字节范围的代码

function getRequestRange(range: string,fileSize: number): {
  start?: number,end?: number
} {
  const result: {
    start?: number,end?: number
  } = {}

  const [start,end] = range.replace(/bytes=/,'').split('-')
  let byteStart: number,byteEnd: number

  result.start = parseInt(start,10)
  result.end = end ? parseInt(end,10) : fileSize - 1

  if (!isNaN(byteStart) && isNaN(byteEnd)) {
    result.end = fileSize - 1
  }

  if (isNaN(byteStart) && !isNaN(byteEnd)) {
    result.start = fileSize - byteEnd
  }

  if (result.start >= fileSize || result.end >= fileSize) {
    throw { error: rangeError,fileSize }
  }

  return result
}

生成的标头:

{
    headers['Content-Range'] = `bytes ${byterange.start}-${byterange.end}/${size}`
    headers['Accept-Ranges'] = 'bytes'
    headers['Content-Length'] = byterange.end - byterange.start + 1
}

这将在“网络”标签中返回206,以进行部分加载,我可以对此进行验证。但是,当我尝试寻找尚未加载的时间时,视频会从头开始重新播放,并在加载至尝试加载其他时间之前的时间点冻结​​。

HTML Video元素:

<video
    autoplay="true"
    controls="true"
    onLoadedMetadata={handleVideoLength}
>

为了保护数据,服务器被设置为通过来自不同服务的API通过我们的API代理媒体流,该服务可以访问存储内容的AWS S3。

您知道为什么在尝试搜索尚未加载的时间时视频会冻结吗?我对部分加载的理解是,它会请求通过查找时间指定的块,然后向服务器发送另一个请求以获取该信息。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。