Advanced progress thumbs for Video Js player

Progress thumbs Nuevo plugin for Video Js Nuevo plugin for Video.js framework offers advanced plugin which allows to display thumbnails over progress bar synchronized with video timeline. Progress thumbnails is as easy to apply as video poster, however preparing such thumbnails is quite specific and can be troublesome for webmasters without programming experience. Most of available plugins of this type use a collection of small thumb images and hierarchical list of image paths along video timestamps.

What is progress thumbs image by Nuevolab?

Nuevo plugin use only one JPG image combined of many small thumbnails, arranged one after another in vertical direction, just like example thumbs image for video above. This is 192 x 6804 jpg image and consists of 63 thumbs, each 192 x 108 pixels. Thumbs image cannot be higher than 10000 px. Single thumb width and height can be different than 192x108, though it is suggested to keep 16x9 aspect ratio. If thumb's size different than default (192x108), you must define it in Nuevo plugin options. You need to calculate the number of small thumb images and time intervals that thumbs should be generated from video, according to video duration and later combined into single JPG image. In example above this is 63 thumbs for 04:12 (252 seconds) long video. It's easy to calculate that small thumbs were generated per each 4 seconds of video.

Why our progressbar thumbs plugin is so unique?
The plugins of this type that you can find on internet make use of list of small thumb images and loads each single image on separate request. Not only such plugin requires a long list of image paths and timestamps for each thumb, but it also means HTTP request for each single image (63 HTTP reuests for example video). And you can read everywhere that one of most important things to keep your website loading fast is to limit nuber of HTTP requests to absolute minimum. That's hy our idea was to build a plugin that use only one HTTP request for one image. This really matters. Imagine one HTTP request instead of 63! Additionally image already loaded is much more smooth in display, allows for much more precise thumbs. Additionally our Nuevo plugin takes care not to load progressbar thumbs for mobile devices. Mobile device does not support mouse over event, is usually too small to display thumbs over progressbar. So now you can imagine how our plugin unique is and how important it is.

Webmasters who know PHP and GD image processing functions should not have a trouble with writing necessary code to generate one big thumb image. Of course it's possible to do it manually, but it's not handy, definitely not for websites with many videos.

As it was mentioned assigning progress thumbs image is very simple, inline of video tag or as nuevo.js option just like in code examples below.

<video id="myplayer" class="video-js vjs-default-skin" poster="http://www.domain.com/poster.jpg" slideImage="http://www.domain.com/slide-image.jpg" controls preload="auto">
  <source src="http://www.domain.com/video_480.mp4" default res="480" label="480" type="video/mp4">
  <source src="http://www.domain.com/video_720.mp4" default res="720" label="720" type="video/mp4">
</video>


<video id="myplayer" class="video-js vjs-default-skin" poster="http://www.domain.com/poster.jpg"  controls preload="auto">
  <source src="http://www.domain.com/video_480.mp4" default res="480" label="480p" type="video/mp4">
  <source src="http://www.domain.com/video_720.mp4" default res="720" label="720p" type="video/mp4">
</video>
<script>
var player = videojs('veoplayer',nuevo,function(){ 
	this.nuevoPlugin({
		slideImage="http://www.domain.com/slide-image.jpg",
		slideImageWidth: 160,
		slideImageHeight: 90
	});
});
</script>

If your thumb images are of different size than default (192x108 px), you need to set appropriate options for "nuevo" plugin. See code setup below for progress thumbs and size 160x90 px.

<video id="myplayer" class="video-js vjs-default-skin" poster="http://www.domain.com/poster.jpg" slideImage="http://www.domain.com/slide-image.jpg" controls preload="auto">
  <source src="http://www.domain.com/video_480.mp4" default res="480" label="480p" type="video/mp4">
  <source src="http://www.domain.com/video_720.mp4" default res="720" label="720p" type="video/mp4">
</video>
<script>
var player = videojs('veoplayer',nuevo,function(){ 
	this.nuevoPlugin({
		slideImageWidth: 160,
		slideImageHeight: 90
	});
});
</script>

For few dynamic video CMS/scripts Nuevolab offers ready scripts to generate progress thumb images automatically for newly uploaded videos or to generate thumbs image manually for already hosted videos.