Have you ever been trying to find a precise information from a long video ?

Or go back to a specific section that you would like to see again ?
Is it not frustrating to poke the progress bar multiple times before finding the right information ?

NVP will kinda disambiguates your video and help the viewer navigates it smoothly.

One example

Credits

music : Camille Saint Saens - link - Open Audio license

1st clip : from Pexels by Damon Hall link

2nd clip : from Pexels by Kelly Lacey link

3rd clip : from Pexels by Tom Fisk link

4th clip : from Pexels by Kelly Lacey link

All excerpts are released under a free to use license. Also if an error has been made, please enquire and we will remove.

Setup

Setting up the nvp player is fairly easy, just add the js and css files to your webpage and create an HTML Div with a unique Id:

 <div id="myvid">
 	
 </div>

Then add the following Js script bit:

 <script>			

   var options = {
   ContainerId: "myvid",
   images: [
     {"url": "./example/montagne.jpg", "start": "00:00", "title":"Beautiful mountains of New Zealand"},
     {"url": "./example/nuages.jpg", "start": "00:08", "title": "A blanket of clouds"},
     {"url": "./example/voitures.jpg", "start": "00:15", "title": "So many cars !!  Wow !!"},
     {"url": "./example/buildings.jpg", "start": "00:22", "title": "Hovering the city Skyline !"}	
  	],
   videoSource: "./example/video.mp4",
   textDisplay: "title", // title, no	
   narrativesSize: "big" // small, normal, big, bigger	
   };

 </script>

ContainerId is the Id of the Div you have just created

Images is an array of objects containing definoing the narratives and what they look like.

url : the location of the narrative image
start : starting point of the video for this narrative. The ending point is the following narrative start value.
title : a short description of the narrative breakpoint. It can be shown when hovering the image (this capability is handlled by option value "textDisplay" explained hereafter). Even if you have the ability to reveal this information or not it is important to populate accurately as visually impaired viewers will have access to this information in all cases.

videoSource is the place where is located your video (pure video URL, Youtube or others not yet supported)

textDisplay is an indicator of the title should be displayed on hover or not. Values accepted are "title" or "no".

narrativesSize allows to change the size of the narratives. Available values : small, normal, big, bigger

Advantages

Facilitates navigation within video
Gives information about video content
A11y compliant using aria labels, giving visually impaired viewers a good description of each section (this will be enhanced when further development of "narratives" descriptions is implemented)
Lightweight (also edge cases are not yet taken care of yet)

Development

Nvp is currently at Beta stage. A lot of further improvements are planned. But please still log issues on the github repo so I know what to prioritize.

Planned improvements:

Handle different narratives sizes nicely (in case narratives images have variying widths especially)
Maybe support for Youtube videos ?
NPM packaging (if I manage to get fluent with NPM, Yarn, Webpack..)
An inline tool generating snapshots from a submitted video in order to produces narratives images on this website
Non linear narratives images resizing to allow better visual appearance ?
...

Best