Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
Philipp, it is ok to ask and answer your own Question. Right now, this one is hanging on the unanswered list, when in fact it is not ;) –  brasofilo Jan 28 '13 at 13:19
    
You're right @brasofilio. Hopefully it's OK how I closed it. –  Philipp Jan 28 '13 at 13:39

1 Answer 1

up vote 0 down vote accepted

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('http://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!

share|improve this answer
3  
It would be better if you edited your question, cut the solution content out, and paste it into your answer. –  anu Jan 28 '13 at 14:13
    
Please use the edit link on your question to add additional information. The Post Answer button should be used only for complete answers to the question. –  s_ha_dum Jan 28 '13 at 14:38

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.