How do I create a Navigation Bar by using time stamps?

Overview

You may be in a situation where you have a long video with multiple parts to it. It would be beneficial for the viewing experience to split it into sections so that the viewer can engage with what's relevant to them.

You could achieve this by splitting the video into multiple videos and creating a playlist, but this isn't always feasible. Vidyard offers an alternative by using an annotation event.

Result

Steps

1. From the Vidyard Dashboard, select Content > Events 
   
2. Select Annotation, then click Create.
   
3. Give your event a title. Then Click HTML.
   
4. Replace the current text with the code from this Codepen.
   
5. Configure the section from line 21 by adjusting onclick="jumpToSecond(#)" to the desired timestamps. You can use jumptoVideo instead of jumptoSecond if you have other chapters to link to.
   
   Note: The number onclick="jumpToSecond(0)" is in Seconds. (For example, for 1:30: onclick="jumpToSecond(90))
6. Configure the header you would like to associate the timestamp to
   

   <a onclick="jumpToSecond(#)">HEADER NAME</a>

7. If you wish to add another checkpoint, Copy and Paste the code below after the end of the list tag (</li>) and edit the changes as needed:
   

   <li><a onclick="jumpToSecond(0)">HEADER NAME</a></li>

8. Once you are done editing, click Annotation Style.
   
9. Set the Background Transparency to 100%.
10. Click and hold the Navigation Bar annotation and move it to the desired location.
    
    Important - Click and drag the size of the Navigation bar to the bottom of the video.
11. Click Apply.
    
12. Click Save and Assign
    
13. Click Add Video to choose the related video from your library
    
14. Set the annotation time to as long as you desire it to show on the video.
    
15. Save!