Sublime Video: Playlist mit allen angehängten Videos

Ich habe nach einer Möglichkeit gesucht, alle angehängten Videos in einem benutzerdefinierten Post-Typ automatisch als SublimeVideo-Wiedergabeliste zu laden. Nach einiger Zeit habe ich es funktioniert und hier werde ich den Code mit allen teilen, die daran interessiert sind, es auf die gleiche Weise zu tun.

Solutions Collecting From Web of "Sublime Video: Playlist mit allen angehängten Videos"

Erhalten Sie als erstes alle Video-Anhänge des Posts oder der Seite:

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

2.: Laden Sie die Videos mit einer eindeutigen ID in den Playlist-Code ( http://docs.sublimevideo.net/beta/playlists ). Hier verwende ich die Attachement ID für jedes Video und das gleiche für das Thumbnail. Sie müssen die Breite und Höhe innerhalb des -Codes ändern.

 
< ?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 '
'; echo ''; echo '
'; } }?>
    < ?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 '
  • '; } } ?>

3. Nun, das ist getan. Jetzt wollte ich die Videos ansprechen lassen, um die Größe für mobile Geräte zu ändern. Hier hat mir das SublimeVideo-Team geholfen. Fügen Sie Ihrem Stylesheet den folgenden Stil hinzu:

  /* 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; } 

Die Fluidbreite ist hier definiert (du hast es schon kopiert!):

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

Last but not least: Fügen Sie den JavaScript-Code hinzu, wie er in der Dokumentation ( http://docs.sublimevideo.net/beta/playlists ) zu sehen ist:

  

Das ist es. Ich hoffe, es hilft jedem, der damit beginnt, auch damit verloren zu gehen!