THEOplayer 2.X Demo: Creating bookmarks

This page demonstrates how to create bookmarks with CSS, JavaScript and the THEOplayer API.

A bookmark keeps track of some metadata: the video source link, the title of the video, the last position of the playhead position and the duration of the video. When a bookmark is clicked, this data is loaded into the video player.

Bookmarks UI:

Star Wars Reel
 
Star Wars Reel
 
Tears of steel
 

Click a poster image to start playing. The red bar represents the played portion of the video.

 

JavaScript code:

// 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.currentTime = bookmark.currentTime; player.play(); } else { player.currentTime = bookmark.currentTime; } } // 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

HTML code:

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

CSS code:

.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;
}
 

Bookmarks THEOplayer