HTML on mouseover preview thumnail

[Walid]

Hello everyone,

I'm trying to create an index file, containing a html5 video player from a source file (<video src="video.mp4" as an example) with video controls, my problem is that I want to add a thumbnail preview from the video on where my mouse is hovered on the controller like on YouTube, does anyone have the full code for that including the css/js files for it if any?

thanks in advance!

[Funce]

Are you referring to the video timeline? Like previews for different timestamps?

Yeah that's going to take a lot more than a bit of css and js.

You're going to need to create a custom video timeline (because you don't want to try and access the native browser ones), get snapshots at the various times, map cursor position to the timeline, match that up to the snapshot that it corresponds to, and display it as applicable. (either on the cursor, or otherwise)

And if you're doing something like this, you might as well just embed YouTube for all the good its worth.