Creating bookmarks

// information on setting up THEOplayer and the player object can be found at https://docs.portal.theoplayer.com/docs/docs/getting-started/web/web

// bookmarks data storage 
var bookmarksData = [
    {
        src : 'https://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8',
        type: 'application/x-mpegurl',
        currentTime: 150,
        title: 'Star Wars Reel',
        description: 'Star Wars Reel',
        duration: 211,
        poster: 'https://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/poster.jpg'
    },
    {
        src : 'https://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8',
        type: 'application/x-mpegurl',
        currentTime: 20,
        title: 'Star Wars Reel',
        description: 'Star Wars Reel',
        duration: 211,
        poster: 'https://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/poster.jpg'
    },
    {
        src : 'https://cdn.theoplayer.com/video/tears_of_steel/index.m3u8',
        type: 'application/x-mpegurl',
        currentTime: 500,
        title: 'Tears of steel',
        description: 'Tears of steel',
        duration: 733.983222,
        poster: 'https://cdn.theoplayer.com/video/tears_of_steel/poster.jpg'
    }
],
bookmarks = document.querySelectorAll('.bookmark'); // fetch bookmark divs

// attach click handler to bookmark elements
for (var i = 0; i < bookmarks.length; i++) {
    bookmarks[i].addEventListener('click', loadBookmark);
}

// load bookmark data in THEOplayer video player
function loadBookmark(event) {
    
    // update selected bookmark ID
    selectedBookmarkId = bookmarkId;
    
    // save settings when switching bookmark
    if (selectedBookmarkId && player.currentTime) {
        bookmarksData[selectedBookmarkId].currentTime = player.currentTime;
        document.querySelector('.bookmark[data-id="'+selectedBookmarkId+'"] .loaded-progress-bar').style.width = ''+Math.round(bookmarksData[selectedBookmarkId].currentTime / bookmarksData[selectedBookmarkId].duration * 100)+'%';
    }
    
    // fetch bookmark from storage
    var bookmarkDiv = event.target.parentNode,
        bookmarkId = bookmarkDiv.dataset.id,
        bookmark = bookmarksData[bookmarkId];
        
    if (bookmark.src !== player.src) {
            // update player with bookmark config
            player.source = {
                sources: [{
                    src : bookmark.src,
                     type : bookmark.type,
                }]
            };
            player.addEventListener("playing", setCurrentTimeAfterSource);
            player.play();
        } else {
            player.currentTime = bookmark.currentTime;
        }
        
        // update selected bookmark ID
        selectedBookmarkId = bookmarkId;
		
      	// set the currentTime from the bookmark into the source after the source has been set. If the currentTime is set before the source is still changing, it will not apply
      function setCurrentTimeAfterSource(){
        player.currentTime = bookmark.currentTime;
        player.removeEventListener("playing", setCurrentTimeAfterSource);
      }
    }

// initial update of bookmark div elements with bookmark storage data
function initializeBookmarksData () {
    var bookmarks = document.querySelectorAll('.bookmark');
    for (var i = 0; i < bookmarks.length; i++) {
        var bookmarkData = bookmarksData[bookmarks[i].dataset.id];
        bookmarks[i].querySelector('.loaded-progress-bar').style.width = ''+Math.round(bookmarkData.currentTime / bookmarkData.duration * 100)+'%';
    }
}
initializeBookmarksData(); // invoke function

<div class="bookmarks-container">
    <div class="bookmark" data-id="0">Big Buck Bunny <img src="//cdn.theoplayer.com/video/big_buck_bunny/poster.jpg">
        <div class="progress-bar">
            <div class="loaded-progress-bar"> </div>
        </div>
    </div>
    <div class="bookmark" data-id="1">Star Wars Reel <img src="//cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/poster.jpg">
        <div class="progress-bar">
            <div class="loaded-progress-bar"> </div>
        </div>
    </div>
    <div class="bookmark" data-id="2">Tears of steel <img src="//cdn.theoplayer.com/video/tears_of_steel/poster.jpg">
        <div class="progress-bar">
            <div class="loaded-progress-bar"> </div>
        </div>
    </div>
</div>

.progress-bar {
  margin: 0 auto;
  width: 100%;
  display: inline-block;
  background-color: #ddd;
}

.loaded-progress-bar {
  width: 10%;
  height: 8px;
  background-color: rgb(229, 9, 20);
  text-align: center;
  line-height: 8px;
  color: white;
}

.bookmarks-container {
    background: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
}

.bookmark {
 width: 200px;
 text-align: center;
 display: inline-block;
}

.bookmark img {
    max-width: 200px;
    cursor: pointer;
}