Sublime Video: Playlist which gets all attached videos

1 comment

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

   Log in to Reply