Articles in this section

See more

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

Avatar
Evan Stewart
  • Updated

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

Results of a Navigation BarSteps

  1. From the Vidyard Dashboard, select Content > Events 
  2. Select + New Event, choose Annotation, then click Create.
  3. Click HTML and replace the source code with the code below.
  4. Configure the section onclick="jumpToVideo(0)" to the desired timestamp
    Note: The number onclick="jumpToVideo(0)" is in Seconds. (For example, for 1:30: onclick="jumpToVideo(90)) 
  5. Configure the header you would like to associate the timestamp to
    <a onclick="jumpToVideo(0)">HEADER NAME</a>
  6. 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="jumpToVideo(0)">HEADER NAME</a></li>
  7. Once you are done editing the code click Annotation Style.
  8. Set the Background Transparency to 100%.
  9. Click and hold the Navigation Bar annotation and move it to the desired location.
  10. Important - Click and drag the size of the Navigation bar to the bottom of the video (Refer to 1:34 on the Walkthrough Video).
  11. Click Apply.
  12. Set the annotation time to as long as you desire it to show on the video.
  13. Set Published to ON.
  14. Save.

Code

<style type="text/css">html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-align: center;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }

body { line-height: 1 }

ol, ul { list-style: none }

blockquote, q { quotes: none }

blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none
}

table {
border-collapse: collapse;
border-spacing: 0
}

body {
font: 100% "roboto", "Trebuchet MS", sans-serif;
}

a { text-decoration: none; }

/**
* Hidden fallback
*/


/**
* Styling navigation
*/

header {
margin-right: auto;
margin-left: auto;
max-width: 22.5rem;
margin-top:150px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

/**
* Styling top level items
*/

.nav a, .nav label {
display: block;
padding: .55rem;
color: #fff;
background-color: #7DC577;
box-shadow: inset 0 -1px #66ba5e;
-webkit-transition: all .25s ease-in;
transition: all .25s ease-in;
}

.nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover {
color: rgba(255, 255, 255, 0.5);
background: #55b34d;
}

.nav label { cursor: pointer; }

/**
* Styling first level lists items
*/

.group-list a, .group-list label {
padding-left: 1rem;
background: #88c982;
box-shadow: inset 0 -1px #http://www.colorpicker.com/;
}

.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #aad9a6; }

/**
* Styling second level list items
*/

.sub-group-list a, .sub-group-list label {
padding-left: 4rem;
background: #353535;
box-shadow: inset 0 -1px #474747;
}

.sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: #232323; }

/**
* Styling third level list items
*/

.sub-sub-group-list a, .sub-sub-group-list label {
padding-left: 6rem;
background: #454545;
box-shadow: inset 0 -1px #575757;
}

.sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #333333; }

/**
* Hide nested lists
*/

.group-list, .sub-group-list, .sub-sub-group-list {
height: 100%;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .5s ease-in-out;
transition: max-height .5s ease-in-out;
}

.nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
max-height: 1000px; }

/**
* Rotating chevron icon
*/

label > span {
float: right;
-webkit-transition: -webkit-transform .65s ease;
transition: transform .65s ease;
}

.nav__list input[type=checkbox]:checked + label > span {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}</style><script type="text/javascript">
function jumpToVideo(second) {
var ctaId = window.frameElement.id.split('_')[1];
var playerId = window.frameElement.src.split('/');
playerId = playerId[playerId.length-3];
var playerData = {uuid: playerId, event: 'seek', position: second};
window.parent.postMessage(JSON.stringify(playerData), '*');
}
</script><nav class="nav" role="navigation"><ul class="nav__list"><li><input id="group-1" type="checkbox" hidden="" /> <label for="group-1">Navigate</label><ul class="group-list"><li><a onclick="jumpToVideo(0)">HEADER NAME]</a></li><li><a onclick="jumpToVideo(15)">HEADER NAME</a></li></ul></li></ul></nav>

Related articles