HTML video Scrubbar

This experiment explores how a video player scrubbar would look like if it didn't contain full frames one next to another to fill the available space with as many full frames as possible, but instead if each unit of resolution of the available space was painted with a slice through the middle of the video at that time.

Would the parts of the video be recognizable? Would it help see cuts and landmarks better? Would it be preferrable to the status quo? You decide.

Movie Hero made by Blender and obtained from Wikimedia. Source

Generate scrubbar by seeking with sliding

This is the same as the method below but instead of always taking the middle slice from the frame, it takes a slice where if the scrubbar was filled with frames side by side, the current position intersects the frame at some ratio of its width and that same ratio of its width is used to take the slice in the source video frame.

This provides much better results in static scenes and no worse results in dynamic ones.

It should generate this:

Generate scrubbar by seeking

This method seeks the video at times corresponding with each unit of resolution of the available scrubbar space. It looks like a very jittery playback and the spinner is blinking throughout of the generation process, so it is not very suitable, but is the most efficient (each unit is generated once).

It should generate this:

Generate scrubbar as playing with sliding

This is the same principle as the seeking sliding version with the same benefit of the playing version (not hijacking the playback position), but also the same drawback (gaps in continuous playback and taking longer to generate).

It should generate this:

Generate scrubbar as playing

This method makes use of the timeupdate event of a playing video. It is real-time (so potentially slower than the seeking method) and is dependent on the playback state of the video, but makes for a more useful user experience.

To avoid gaps caused by potentially low time update event firing frequency, several units are painted each time to ensure to cover the gaps in case of a real time playback even if the update frequency is low.

It should generate this: