频道导航

HTML5视频的字节范围请求(伪流)如何工作？

2019-05-04 HTML5 前端之家

前端之家收集整理的这篇文章主要介绍了HTML5视频的字节范围请求(伪流)如何工作？，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

如果您为接受范围请求的服务器上托管的视频播放 HTML5视频,那么当您尝试提前查看视频的非缓冲部分时,您会从网络流量中注意到浏览器创建了一个字节范围请求.我假设浏览器通过提前知道总视频大小并假设一个恒定的比特率来计算字节(如果你在进度条中点击一半,那么它将在中途点请求字节).但特别是如果视频是可变比特率的,那么它所请求的字节似乎不太可能真正对应于用户点击的时间点,并且该字节可能会落在帧的中间.

一旦它开始在某个任意字节读取,浏览器如何知道下一帧的开头是什么？

解决方法

我假设您的视频位于Mp4容器中. mp4文件格式包含“盒子”的分层结构.其中一个框是Time-To-Sample(stts)框.此框包含每个帧的时间(以紧凑的方式).从这里你可以使用Sample-to-Chunk(stsc)原子找到包含框架的’chunk’.最后,Chunk offset atom(stco)为您提供文件中的字节偏移量.

电影的总持续时间存储在电影标题原子(mvhd)中.移动滑块手柄时,会根据影片的持续时间和放松擦除手柄的位置估算时间,然后根据先前下载的文件头进行计算,并发出请求.

编辑：如果不是mp4,其他容器也有类似的机制.编解码器是无关紧要的.

上一篇：html5 – HTML / CSS中的像素字体下一篇：HTML5;在Javascript中检测物理键盘

猜你在找的HTML5相关文章

BAT大佬推荐使用的HTML5的十个功能

HTML5不是新事物。自从最初发布（2008年1月）以来，我们一直在使用它的一些功能。后来，我...

作者：前端之家时间：2020-12-30

Pointer Event Api-整合鼠标事件、触摸和触控笔事件

Pointer Events API 是Hmtl5的事件规范之一，它主要目的是用来将鼠标（Mouse）、触摸（tou...

作者：前端之家时间：2020-12-28

CSS3图片翻转动画技术详解

CSS动画非常的有趣；这种技术的美就在于，通过使用很多简单的属性，你能创建出漂亮的消隐效...

作者：前端之家时间：2020-12-28

使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变

clip-path介绍 clip-path 直译过来就是裁剪路径，使用SVG或形状定义一个HTML元素的可见区域...

作者：前端之家时间：2020-12-28

CSS3 - @keyframes

语法必需。动画时长的百分比。合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）...

作者：前端之家时间：2020-12-28

CSS使用position:sticky 实现粘性布局

简介前面写了一篇文章讲解了position常用的几个属性：《CSS 属性之 position讲解》一般都...

作者：前端之家时间：2020-12-28

CSS效果：CSS3实现模拟select以及其中的三角形

如图实现这样的效果： html代码如下： css样式代码：

作者：前端之家时间：2020-12-28

CSS3 calc实现滚动条出现页面不跳动

什么是calc()? calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calc...

作者：前端之家时间：2020-12-28

CSS/CSS3中的原生变量var详解以及布局响应式网页扩展

使用语法首先我们先来看一个例子：html代码： css代码：实现效果：结果是该DOM元素背景...

作者：前端之家时间：2020-12-28

CSS3动画属性：转换(transition)

W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间...

作者：前端之家时间：2020-12-28

最新文章