3

在 HTML5 播放器中搜索媒体时，您可以使用 currentTime 结构跳转（搜索）到特定时间。

JavaScript API，currentTime 是如何在浏览器中实现的？

例如，

mediaElement.currentTime = 122; // Seek to 122 seconds in the video

我在电线上（使用wireshark）看到的是：

GET /videos/q1fx20VZ-52qL9xLP.mp4 HTTP/1.1
...
Range: bytes=47864170-

所以，我的猜测是，客户端的某个实体正在执行从time domain 到 byte domain的转换。

请帮忙揭开这个神秘面纱？

4

2 回答 2

2

来自http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#dom-media-currenttime，

该currentTime属性必须在获取时返回媒体元素的 默认播放开始位置，除非该位置为零，在这种情况下，它必须返回元素的正式播放位置。返回值必须以秒为单位。在设置时，如果媒体元素 具有当前媒体控制器，则用户代理必须抛出 InvalidStateError异常；否则，如果媒体元素是 ，readyState则HAVE_NOTHING必须将媒体元素的 默认播放开始位置设置为新值；否则必须设置正式播放位置到新的价值，然后寻求新的价值。新值必须被解释为以秒为单位。

看来你想要这个seek案子。

然后，根据http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#dom-media-seek，

该seekable属性必须返回一个新的静态规范化 TimeRanges对象，该对象表示在评估属性时用户代理能够寻求的媒体资源范围（如果有）。

如果用户代理可以搜索媒体资源中的任何位置，例如因为它是一个简单的电影文件，并且用户代理和服务器支持 HTTP Range 请求，那么该属性将返回一个具有一个范围的对象，其开始时间是第一帧（最早可能的位置，通常为零），并且其结束与第一帧的时间相同加上持续时间属性的值（这将等于最后一帧的时间，并且可能是正无穷大）。

范围可能会不断变化，例如，如果用户代理正在缓冲无限流上的滑动窗口。例如，这是观看直播电视的 DVR 所看到的行为
。

媒体资源可能是内部脚本或交互式的。因此，媒体元素可以以非线性方式播放。如果发生这种情况，只要当前播放位置
以不连续的方式发生变化（以便相关事件触发），用户代理就必须像使用搜索算法一样行事。如果媒体元素有一个当前的媒体控制器，那么用户代理必须适当地寻找媒体控制器。

于 2013-10-19T00:24:56.757 回答
1

大多数人将视频文件.mp4视为文件，但实际上avi, mp4, mkv还有更多只是在其中存储大量信息的容器。最好的类比是存档（您将其视为一个文件，但它是许多文件只是组合在一起并压缩）。大多数时候，这个容器里面有音频和视频（它们是同步的）和一些元数据，这些元数据有助于读取这个容器的程序了解里面的内容。您可以在此处阅读有关编解码器和容器的信息

当您观看视频时，您实际上正在访问这两个流（视频和音频）。在此期间，您的计算机正在执行多项操作：

  • 解码视频流并将它们显示为一系列图像（如动画 gif）
  • 解码音频并强制您的扬声器发出声音
  • 一些额外的东西

为了了解视频导航（基本上是解码）是如何工作的，您需要了解视频是如何编码的。你可以在这里阅读。基本上一切都围绕三个主要框架发展：

  1. I 帧的可压缩性最低，但不需要其他视频帧进行解码。
  2. P 帧可以使用先前帧中的数据进行解压缩，并且比 I 帧更易于压缩。
  3. B 帧可以同时使用前一帧和前一帧作为数据参考，以获得最高的数据压缩量。

这样做是因为如果您将视频存储为一系列 .jpg 图片，它会非常庞大​​。P 帧和 B 帧可让您节省空间。（如果您曾经尝试从torrent打开未完全下载的视频，并且看到当您转发并强制您几乎看不到里面的内容时，现在您知道为什么会发生这种情况了，P帧和B帧不存储所有信息）。因此，当您向前和向后移动时，您就是在 I 帧之间导航。Container 存储有关这些 I 帧位置的信息，并允许您快速浏览文件。HTML5 通过 JS 为您提供 API 来访问这些数据以及在您进行 API 调用时mediaElement.currentTime = 122浏览器只是将时间转换为您必须从中读取新信息的偏移量。如果您愿意，您可以深入研究一些开源浏览器代码并检查它是如何实现的。

写在一天结束的时候，所以我想吃饭，没有足够的时间。如果您发现一些不准确之处 - 请随时进行编辑。

于 2013-10-19T00:51:31.467 回答