Sublime Video: Playlist which gets all attached videos

I searched a way to automatically load all attached videos in a custom post type as SublimeVideo playlist. After some time I got it working and here I’ll share the code with everyone who is interested to do it the same way.

First of all get all video attachements of the post or page:

<?php $attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'video') );

if ( $attachments ) { ?>

2nd: Load the videos into the playlist code with a unique ID (http://docs.sublimevideo.net/beta/playlists). Here I do use the attachement ID for each video and of cause the same for the thumbnail. You have to change the width and height within the <video> code.

<div id="playlist1" class="sv_playlist">
<?php   
$args = array(
    'post_type' => 'attachment',
    'post_mime_type' => 'video',
    'numberposts' => null,
    'post_status' => null,
     'orderby' => 'title',
    'post_parent' => $post->ID
); 
$attachments = get_posts($args);

if ($attachments) {
    foreach ($attachments as $attachment) {
        echo '<div class="video_wrap">';
        echo '<video width="568" height="320" id="video';
        echo $attachment->ID;
        echo '" data-settings="autoresize:fit" poster="';
        echo '" preload="true">';
        echo '<source src="';
        echo wp_get_attachment_url ($attachment->ID);
        echo '" /></video>';
        echo '</div>';



    }
}?>
<ul class="thumbs">
<?php   
$args = array(
    'post_type' => 'attachment',
    'post_mime_type' => 'video',
    'numberposts' => null,
    'post_status' => null,
     'orderby' => 'title',
    'post_parent' => $post->ID
); 
$attachments = get_posts($args);

if ($attachments) {
    foreach ($attachments as $attachment) {
        echo '<li style="padding:0px;" id="thumbnail_video';
        echo $attachment->ID;
        echo '">  <a href=" "> <img style="height:100%" alt="" src="';
        echo wp_get_attachment_url( get_post_thumbnail_id($post->ID));
        echo '" width="144" height="71" /> <span class="play" /> </a> </li>';

}
} 

?>
</ul>
</div>  

3rd: Well that’s done. Now I wanted to have the videos responsive to allow resizing it for mobile devices. Here the SublimeVideo-Team helped me. Please add the following style to your stylesheet:

 /* VIDEO PLAYER!! */

/* Thumbnails below the video */

img {border:none;}

.sv_playlist .video_wrap {
width: 100%;
height: auto;
display:none;
background:#fff;
-moz-box-shadow:rgba(0,23,60,0.5) 0 4px 17px;
-webkit-box-shadow:rgba(0,23,60,0.5) 0 4px 17px;
box-shadow:rgba(0,23,60,0.5) 0 4px 17px;
}


.sv_playlist .video_wrap.active {
  display:block;
}

.sv_playlist ul.thumbs {
  list-style-type:none;
  width:800px;
  overflow:hidden;
  margin:20px auto;
}

.sv_playlist li {
  float:left;
  display:block;
  width:144px;
  height:81px;
  margin:0 19px 19px 0;
  background:#000;
  border:1px solid #000;
  -moz-box-shadow:rgba(0,23,60,0.5) 0 2px 10px;
  -webkit-box-shadow:rgba(0,23,60,0.5) 0 2px 10px;
  box-shadow:rgba(0,23,60,0.5) 0 2px 10px;
}

.sv_playlist li.active {
  border-color:#fff;
}

.sv_playlist li a {
  display:block;
  position:relative;
}

.sv_playlist li a span.play {
  display:block;
  width:144px;
  height:81px;
  /* you can find the play icon here: http://f.cl.ly/items/3M0u0p0i0k1l3S0v2b1G/playlist_play_icon.png */
  background:url('https://f.cl.ly/items/3M0u0p0i0k1l3S0v2b1G/playlist_play_icon.png') no-repeat center;
  background-color:rgba(0,0,0,0.6);
  position:absolute;
  top:0;
  left:0;
  -moz-box-shadow:inset rgba(255,255,255,0.3) 0 1px 0;
  -webkit-box-shadow:inset rgba(255,255,255,0.3) 0 1px 0;
  box-shadow:inset rgba(255,255,255,0.3) 0 1px 0;
  -o-transition:background-color,0.25s,linear;
  -moz-transition:background-color,0.25s,linear;
  -webkit-transition:background-color,0.25s,linear;
  transition:background-color,0.25s,linear;
}

.sv_playlist li a:hover span.play {
  background-color:rgba(0,0,0,0);
}

.sv_playlist li.active a span.play {
  background:none;
}

The fluid width is defined here (you copied it already!):

.sv_playlist .video_wrap {
width: 100%;
height: auto; }

Last but not least: Add the JavaScript code as seen at the documentation (http://docs.sublimevideo.net/beta/playlists):

<script> 
/** http://docs.sublimevideo.net/playlists **/
/** jQuery version **/

var SublimeVideo = SublimeVideo || { playlists: {} };

jQuery(document).ready(function() {
  // A SublimeVideoPlaylist instance can takes some options:
  //  - autoplayOnPageLoad: whether or not to autoplay the playlist on page load. Note that if you set it to true,
  //    you should remove the 'sublime' class from the first video in the playlist.
  //  - loadNext: whether or not to load the next item in the playlist once a video playback ends
  //  - autoplayNext: whether or not to autoplay the next item in the playlist once a video playback ends
  //  - loop: whether or not to loop the entire playlist once the last video playback ends
  var playlistOptions = { autoplayOnPageLoad: false, loadNext: true, autoplayNext: true, loop: false };

  // Automatically instantiate all the playlists in the page
  jQuery('.sv_playlist').each(function(i, el) {
    SublimeVideo.playlists[el.id] = new SublimeVideoPlaylist(el.id, playlistOptions);
  });
});

var SublimeVideoPlaylist = function(playlistWrapperId, options){
  if (!jQuery("#" + playlistWrapperId)) return;

  this.options = options;
  this.playlistWrapperId = playlistWrapperId;
  this.firstVideoId = jQuery("#" + this.playlistWrapperId + " video").attr("");

  this.setupObservers();
  this.updateActiveVideo(this.firstVideoId);
};

jQuery.extend(SublimeVideoPlaylist.prototype, {
  setupObservers: function() {
    var that = this;

    jQuery("#"+ this.playlistWrapperId + " li").each(function() {
      jQuery(this).click(function(event) {
        event.preventDefault();

        if (!jQuery(this).hasClass("active")) {
          that.clickOnThumbnail(jQuery(this).attr("id"), that.options['autoplayNext']);
        }
      });
    });
  },
  reset: function() {
    // Hide the current active video
    jQuery("#" + this.playlistWrapperId + " .video_wrap.active").removeClass("active");

    // Get current active video and unprepare it
    // we could have called sublimevideo.unprepare() without any arguments, but this is faster
    sublimevideo.unprepare(jQuery("#" + this.activeVideoId)[0]);

    // Deselect its thumbnail
    this.deselectThumbnail(this.activeVideoId);
  },
  clickOnThumbnail: function(thumbnailId, autoplay) {
    this.updateActiveVideo(thumbnailId.replace(/^thumbnail_/, ""));

    if (autoplay) { // And finally, prepare and play it if autoplay is true
      sublimevideo.prepareAndPlay(jQuery("#" + this.activeVideoId)[0]);
    } else { // Or only prepare it if autoplay is false
      sublimevideo.prepare(jQuery("#" + this.activeVideoId)[0]);
    }
  },
  selectThumbnail: function(videoId) {
    jQuery("#thumbnail_" + videoId).addClass("active");
  },
  deselectThumbnail: function(videoId) {
    jQuery("#thumbnail_" + videoId).removeClass("active");
  },
  updateActiveVideo: function(videoId) {
    // Basically undo all the stuff and bring it back to the point before js kicked in
    if (this.activeVideoId) this.reset();

    // Set the new active video
    this.activeVideoId = videoId;

    // And show the video
    this.showActiveVideo();
  },
  showActiveVideo: function() {
    // Select its thumbnail
    this.selectThumbnail(this.activeVideoId);

    // Show it
    jQuery("#" + this.activeVideoId).parent().addClass("active");
  },
  handleAutoNext: function(newVideoId) {
    this.clickOnThumbnail(newVideoId, this.options['autoplayNext']);
  }
});

sublimevideo.ready(function() {
  for (var playlistId in SublimeVideo.playlists) {
    SublimeVideo.playlists[playlistId].clickOnThumbnail(SublimeVideo.playlists[playlistId].activeVideoId, SublimeVideo.playlists[playlistId].options['autoplayOnPageLoad']);
  }

  sublimevideo.onEnd(function(sv) {
    var matches = sv.element.id.match(/^video([0-9]+)$/);
    if (matches !== undefined) {
      var playlistId    = jQuery(sv.element).parents('.sv_playlist').attr("id");
      var nextThumbnail = jQuery("#thumbnail_" + sv.element.id).next("li");

      if (nextThumbnail.length > 0) {
        if (SublimeVideo.playlists[playlistId].options['loadNext']) {
          SublimeVideo.playlists[playlistId].handleAutoNext(nextThumbnail.attr("id"));
        }
      }
      else if (SublimeVideo.playlists[playlistId].options['loop']) {
        SublimeVideo.playlists[playlistId].updateActiveVideo(SublimeVideo.playlists[playlistId].firstVideoId);
        SublimeVideo.playlists[playlistId].handleAutoNext(SublimeVideo.playlists[playlistId].activeVideoId);
      }
      else { sublimevideo.stop(); }
    }
  });
});
</script>

That’s it. I hope it helps anyone who starts get get lost with this, too!