Seek-previews for HTML5 <video>
4 September, 2012 § 7 Comments
Some popular video sites now show previews of the video while hovering over the scrubber. This is really useful for trying to find a position within a video without having to interrupt the current playback.
The other night I was wondering if this could be possible with HTML5’s
<video> element. It turns out that something like this can be achievable, and with a couple bug fixes it can also be pretty performant.
The current method for implementing something like this for proprietary websites involves offline creation of a large sprite that includes all of the keyframes for the video. When the user is mousing over the scrubber, the web page can change the visible portion of the sprite to show the currently hovered frame. This works very well and is also very fast as all of the expensive computation is done ahead of time.
This offline method isn’t possible though for the open web today. The HTML5 standard doesn’t include a way for web authors to declare a keyframe sprite, and preexisting videos would lack support for it if this feature was added to the standard today.
Creating an implementation of seek-previews for HTML5
<video> isn’t that hard. To do it, I cloned the
<video> element via
element.cloneNode(true). I then set the cloned video element’s
currentTime attribute to the hovered position within the scrubber. This turns out to work quite well, with the only drawback being poor seeking performance.
currentTime attribute involves trying to get the video playback position as close as possible to the requested time. If this position is far from a keyframe, heavy decoding will be required. Implementing a “fast seek” method would greatly improve the seeking performance here. Bug 778077 was filed to implement this “fast seek” method (this will not replace
currentTime). The other performance issue that will be encountered is unbuffered frames. The method of seeking the video requires downloading the part of the video being seeked to, which is obviously slow.
Try out the demo and let me know what you think. I filed bug 787881 to implement this feature for Firefox. I hope that it will kick-start our fast-seek implementation, as fast-seek can also be used for our present-day seeking within the timeline.