Demo THEOplayer

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.

logo-01

Click on the bookmars below to load the data into THEOplayer

Star Wars Reel
 
Star Wars Reel
 
Tears of steel
 

The red bar represents the played portion of the video.

Bookmarks THEOplayer

 

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

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

Still wasting time debugging video playback problems?

Welcome to cutting-edge video, delivered efficiently and on any platform. We think you're going to like it.