classtranscribe / FrontEnd

The React + Redux Frontend for ClassTranscribe
https://classtranscribe.illinois.edu
Other
25 stars 28 forks source link

Show preview of frame when hovering over seek bar #248

Open astrosticks opened 4 years ago

astrosticks commented 4 years ago

Feature request to support showing a preview image of a point in the video when the seek bar is hovered over.

One way to do it is in the style of YouTube:

cursor hovering over the seek bar in the YouTube player with a small preview of the video at that point

Or, since ClassTranscribe mostly hosts screen recordings of large amounts of text, instead of showing a small preview over the cursor, the preview image could take up most of the screen, to let users see finer details:

Before hover: normal classtranscribe interface

While hovering: classtranscribe interface with the proposed change. a preview image covers the current frame and the current frame is darkened

Some way to visually navigate the video without having to do a binary search through clicking and waiting for the video to buffer would be super helpful for skimming videos.

yiyanglin98 commented 4 years ago

The way Netflix do that is to save a low resolution image (as blob) every 10 seconds, for every video. So perhaps works need to be done on the backend side to implement this feature. Screen Shot 2020-10-26 at 4 37 36 PM