Overview
You may be in a situation where you have a player with multiple videos in it. It would be beneficial for the viewing experience to offer a functionality which allows the viewer to engage with what's relevant to them next without using the playlist navigation.
Below is a block of sample code and instructions on how to implement it. You can also find a similar implementation of this method (with slightly different code) to create a navigation bar using timestamps.
Result
Steps
- Click the Events Tab on the player.
- Select Add Event.
- Click Annotation, then Add Event, then Apply.
- Click Source and replace the code with the code below.
- 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)
) - Configure the header you would like to associate the timestamp to
<a onclick="jumpToVideo(0)">[HEADER NAME]</a>
- 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>
- Once you are done editing the code click Annotation Style.
- Set the Background Transparency to 100%.
- 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 in Event Builder (Refer to 1:34 on the Walkthrough Video in the navigation bar article).
- Click Apply.
- Set the annotation time to as long as you desire it to show on the video.
- Set Published to ON.
- 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(chapter_index) { API.closeCta({ disablePlay: true }); API.playChapter({ chapter_index: chapter_index }); } </script> <!-- Number in brackets after jumptoVideo is chapter number, 0 is first chapter.--> <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)"> First Video </a></li><li> <a onclick="jumpToVideo(1)"> Second Video </a></li> </ul></li></ul></nav>
*edit the jumpToVideo(0) -- '0' to match the index of the chapter you would like to navigate to. Ex. Video / Chap #2 = index '1'