Suplime Video:包含所有附加视频的播放列表

时间:2013-01-07 作者:Philipp

我搜索了一种方法,可以将所有附加的视频自动加载到自定义的post类型中,作为SubliveVideo播放列表。一段时间后,我让它工作起来了,在这里,我将与所有有兴趣以同样方式完成它的人共享代码。

1 个回复
最合适的回答,由SO网友:Philipp 整理而成

首先,获取帖子或页面的所有视频附件:

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

if ( $attachments ) { ?>
第二:使用唯一ID将视频加载到播放列表代码中(http://docs.sublimevideo.net/beta/playlists). 在这里,我确实为每个视频使用了附件ID,因此缩略图也使用了附件ID。您必须在<video> 密码

<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>  
第三:好了,完成了。现在,我想让视频响应,以便为移动设备调整大小。在这里,Sublivevideo团队帮助了我。请将以下样式添加到样式表中:

 /* 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;
}
此处定义了流体宽度(您已经复制了它!):

.sv_playlist .video_wrap {
width: 100%;
height: auto; }
最后但并非最不重要的一点:添加JavaScript代码,如文档所示(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>
就是这样。我希望它也能帮助那些开始迷路的人!

结束

相关推荐

Using shortcodes in PHP

我试图在我的页面中使用短代码,我从一个简单的测试开始。在里面functions.php:function HelloWorldShortcode() { return \'<p>Hello World!</p>\'; } add_shortcode(\'helloworld\', \'HelloWorldShortcode\'); 在中index.php:[helloworld] 这不会产生<p>Hello World