THEOplayer 3.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

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

THEOplayer 3.X Demo: Creating bookmarks

Bookmarks THEOplayer