the narrative video player
Github current version:

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


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.


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">

Then add the following Js script bit:


   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	


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.

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



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: