Jump to content
Sign in to follow this  
Walid

HTML on mouseover preview thumnail

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...