如何实现JavaScript API,currentTime?

时间:2013-10-19 00:01:46

标签: javascript html5

在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-

所以,我的猜测是,客户端的某个实体正在从时域转换为字节域

请帮助神秘化吗?

2 个答案:

答案 0 :(得分:2)

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

  

currentTime属性在获取时必须返回media element   default playback start position,除非是零,在这种情况下它   必须返回元素的official playback position。归来了   值必须以秒表示。在设置时,如果是media element   有一个current media controller,然后用户代理必须抛出一个   InvalidStateError例外;否则,如果media element的话   readyStateHAVE_NOTHING,然后必须设置media element   default playback start position新值;否则,它必须   将official playback position设置为新值,然后将seek设置为   新的价值。必须将新值解释为以秒为单位。

您似乎想要seek案例。

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

  

seekable属性必须   返回一个新的静态规范化   表示范围的TimeRanges对象   媒体资源,如果有的话,那个用户   代理人能够在属性的时候寻求   评价。

     

如果用户代理可以寻求媒体资源中的任何地方,例如因为它是一个   简单的电影文件和用户代理以及服务器支持HTTP范围   请求,然后该属性将返回一个范围的对象,   其开头是第一帧的时间(最早的位置,   通常为零),其结尾与第一次的结束时间相同   frame加上duration属性的值   (这将等于最后一帧的时间,可能是正面的   无穷大)。

     

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

     

媒体   资源可能是内部脚本或交互式的。因此,一个   媒体元素可以非线性播放   时尚。如果发生这种情况,用户代理必须表现得好像   每当当前播放位置时使用搜索算法   以不连续的方式变化(以便相关事件触发)。   如果媒体元素具有当前媒体控制器,则   用户代理必须寻求   适当的媒体控制器。

答案 1 :(得分:1)

大多数人认为像.mp4这样的视频文件是一个文件,但实际上avi, mp4, mkvmany more只是在其中存储大量信息的容器。最好的比喻是存档(你看的是一个文件,但是很多文件只是组合在一起并压缩)。大多数情况下,这个容器内部有音频和视频(已同步)和一些元数据,这有助于读取此容器的程序了解其中的内容。您可以阅读有关编解码器和容器here

的信息

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

  • 解码视频流并将其显示为一系列图像(如GIF动画)
  • 解码音频并强制扬声器发声
  • 一些额外的事情

为了了解视频导航(以及基本解码)是如何工作的,您需要了解视频的编码方式。你可以阅读它here。基本上一切都围绕三个主要框架发展:

  1. I帧是可压缩性最低的,但不需要其他视频帧进行解码。
  2. P帧可以使用来自先前帧的数据进行解压缩,并且比I帧更可压缩。
  3. B帧可以使用前一帧和前一帧进行数据引用,以获得最大量的数据压缩。
  4. 这样做是因为如果您将视频存储为一系列.jpg图片,那将会非常庞大​​。 P帧和B帧可以节省空间。 (如果你曾试图从torrent中打开未完全下载的视频,并看到当你转发回来并迫使你几乎看不到里面的内容时,你现在知道为什么会这样,P帧和B帧不存储所有信息)。因此,当您向前和向后移动时,您将在I帧之间导航。 Container存储有关这些I帧位置的信息,并允许您快速浏览文件。 HTML5为您提供了API和API来访问这些数据,当您进行API调用mediaElement.currentTime = 122时,浏览器只是将时间转换为您必须读取新信息的偏移量。如果需要,您可以深入了解一些开源浏览器代码,并检查这是如何实现的。

    是在一天结束时写的,所以我想吃饭,没有足够的时间。如果你看到一些不准确之处 - 随意编辑。