SublimeVideo

Playlists

The example presented here will allow your visitors to select which video to play by clicking on the respective thumbnails of videos in the playlist. Only the selected video will be shown in the player; once each video finishes playing, the next video will automatically start playing.

In this example, we are making extensive use of our JavaScript API.

HTML Code

This example only has two videos, but you can use any number of videos in your own page. Just repeat the video_wrap <div> (and their respective <li> elements) and keep the same id logic for the <video> and the <li> elements: video3 / thumbnail_video3, video4 / thumbnail_video4, videoN / thumbnail_videoN and so on.

<div id="playlist1" class="playlist">
  <div class="video_wrap">
    <video id="video1" class="sublime" poster="posterframe1.jpg" width="640" height="360" preload="none">
      <source src="video1.mp4" />
      <source src="video1.webm" />
    </video>
  </div>
  <div class="video_wrap">
    <video id="video2" poster="posterframe2.jpg" width="640" height="360" preload="none">
      <source src="video2.mp4" />
      <source src="video2.webm" />
    </video>
  </div>

  <ul>
    <li id="thumbnail_video1">
      <a href="">
        <img alt="Thumbnail 1" src="thumbnail1.jpg" width="178" height="76" />
      </a>
    </li>
    <li id="thumbnail_video2">
      <a href="">
        <img alt="Thumbnail 2" src="thumbnail2.jpg" width="178" height="76" />
      </a>
    </li>
  </ul>
</div>

Note: Add the sublime class to the first <video> element only, since the other <video> elements are initially hidden and prepared through the JS API.

CSS Code

These CSS rules hide the non-active <video> elements and show the active ones. They also add a simple hover effect to the thumbnail <li> elements and set a different style on the currently active thumbnail.

/*
* You probably want to set the same width and height
* that you have set to your <video> elements.
*/
.playlist .video_wrap {
  width:640px;
  height:360px;
  display:none;
}
.playlist .video_wrap.active {
  display:block;
}

/* This will make distinguishable the currently selected thumbnail */
.playlist li.active {
  background:#000;
}

/* This will create a simple hover effect */
.playlist li img {
  opacity:.7;
}
.playlist li a:hover img, .playlist li.active img {
  opacity:1;
}

JavaScript Code

Below we provide 2 examples of the required code using jQuery and Prototype, please make sure that you embed the chosen library (you can find the latest jQuery here and the latest Prototype here) in your page!

Put the following code in a <script> element just before the </body> tag, or in an external file.

• jQuery Version
• Prototype Version

Note: In future, we plan to include built-in playlist functionality that will make this feature even easier to implement, without needing to know any JavaScript.

Demo

You can see this feature in action on this page.

If you want to use several playlists in your page, please check out this page.