Skip to content

A video.js plugin that displays thumbnail images over the scrubber.

License

Notifications You must be signed in to change notification settings

dirkjanm/videojs-vtt-thumbnails

 
 

Repository files navigation

Video.js Thumbnails

A plugin that allows you to configure thumbnails to display when the user is hovering over the progress bar or dragging it to seek.

Using the Plugin

The plugin automatically registers itself when you include video.thumbnails.js in your page:

<script src='videojs.thumbnails.js'></script>

You probably want to include the default stylesheet, too. It handles showing and hiding thumbnails while hovering over the progress bar and a quick animation during the transition:

<link href="videojs.thumbnails.css" rel="stylesheet">

To activate the plugin, add it to your videojs settings object:

<script>
// initialize video.js
var video = videojs('video',{plugins:{thumbnails:{}}});
</script>

The thumbnails need to be added with a VTT file. For this file, the specification used by JW Player applies. The VTT file is added as a metadata track to the video object, for example:

<track kind="metadata" src="oceans.vtt"></track>

Full object example:

<video id='video'
       class='video-js vjs-default-skin'
       width='640'
       height='264'
       poster='http://video-js.zencoder.com/oceans-clip.jpg'
       controls>
  <source src='http://video-js.zencoder.com/oceans-clip.mp4' type='video/mp4' />
  <track kind="metadata" src="oceans.vtt"></track>
</video>

If your thumbnails do not include specified width and height in the VTT file (via the Media Fragment hash), you have to specify the default width and height in pixels the plugin settings:

<script>
// initialize video.js
var video = videojs('video',{plugins:{thumbnails:{width:120,height:90}}});
</script>

You can add an optional basePath if you want to use images hosted on another domain

<script>
// initialize video.js
var video = videojs('video',{plugins:{thumbnails:{width:120,height:90, basePath : "//external.url/basepath/"}}});
</script>

About

A video.js plugin that displays thumbnail images over the scrubber.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 80.6%
  • HTML 10.5%
  • CSS 8.9%