循环播放列表- videojs

Question

我试图通过结合一些代码片段建立一个简单的播放列表(使用VideoJS和它的Dailymotion插件)。我已经获得了一些基本的功能，我正在接近我想要的。现在我想将它更新为自动移动到播放列表中的下一个项目，如果列表中没有下一个项目，则再次移动到第一个项目。我想我可以在视频结束时使用回调，但这似乎不起作用。下一项似乎是随机的。

    // Video ended find next
      $("#myPlayer").on("ended", function(){ 
        if ($("#list li.selected").next("li").length > 0) {
        // There are items left to play, find next li
        $("#list").find("li.selected").next('li').addClass('selected').siblings().removeClass('selected');        
            } else {
              // No more items left to play, start again with first li
            $("#list").find("li:first").addClass('selected').siblings().removeClass('selected');
            }
            playerload();
  }); 

示例HTML

  <div>Playlist - Coming up: <span id="current-tag"></span>
     </div>
    <ul id="list" class="list">
    <li class="playlist-item selected first" data-id="x15xo13" class="selected"><a href="#" >Item 1</a></li>
    <li class="playlist-item" data-id="x1b6fu"><a href="#">Item 2</a></li>
    <li class="playlist-item" data-id="x21uwpw"><a href="#">Item 3</a></li>
    <li class="playlist-item" data-id="x1ux5t"><a href="#">Item 4</a></li>
     </ul>

全部代码

<script>
(function( $ ){
var player = videojs("myPlayer");
$( "#prev, #next" ).on('click', function(e) {
e.preventDefault()
 // Find the right item to load
prevnext(); 
// Load player   
playerload();  
});

$( "#list" ).on('click', 'li', function(e) {
e.preventDefault()
 // Find the right item to load
 $(this).addClass('selected').siblings().removeClass('selected');
// Load player
 playerload(); 
});
function initplayer() {
("myPlayer", {"techOrder": ["dailymotion"]}, function(){
// Player (this) is initialized and ready.
});
}
function prevnext() {
// Browse through itemlist and highligh the selected item
var list = $('#list').find('>li');
var $new, $selected = $(".selected");
$new = (event.target.id == "prev") ? ($selected.index() == 0 ? list.last() :       $selected.prev()) : ($selected.index() == list.last().index() ? list.first() :     $selected.next());
$selected.removeClass("selected");
$new.addClass("selected");
$("#current-tag").text($new.attr('class') + $new.index());
 }
function playerload() {
// load player
initplayer();

// the list should be updated and ready with either the click or the previous/next selected value or after the ended callback
var itemUrl = $("#list").find("li.selected").data('id');
var baselink = "http://www.dailymotion.com/embed/video/" + itemUrl + "?api=postMessage&autoplay=1&related=0&chromeless=1&controls=html&format=json&html=1&id=myPlayer_dailymotion_api&info=1&logo=1&origin=http%3A%2F%2Flocalhost&url=http%3A%2F%2Fwww.dailymotion.com%2Fvideo%2F" + itemUrl + "&wmode=opaque";
   player.ready(function() {
  $("#myPLayer").removeClass("vjs-playing").addClass("vjs-paused");
  $("#myPlayer_dailymotion_api").hide();
  $("#myPlayer iframe").removeAttr("src");
  $("#myPlayer iframe").attr("src", baselink);
  $(".vjs-big-play-button").css("display","none!important"); 
  player.play();
  $("#myPlayer_dailymotion_api").show();

 // Video ended find next
  $("#myPlayer").on("ended", function(){ 
        if ($("#list li.selected").next("li").length > 0) {
        // There are items left to play, find next li
            $("#list").find("li.selected").next('li').addClass('selected').siblings().removeClass('selected');        
            } else {
              // No more items left to play, start again with first li
            $("#list").find("li:first").addClass('selected').siblings().removeClass('selected');
            }
            playerload();
  }); 

});
 }

})( jQuery );
 </script>

Answer 1

不是一个精确的答案(会留下评论，但没有足够的代表这样做)-但是当视频结束事件发生时，如何尝试定位当前选定的项目，遍历到下一个兄弟并触发点击事件?像这样:

player.on( 'ended', function() {
    $('.selected').next('li').trigger('click');
});

至于循环，当你达到最后一个列表项目在你的$#list元素为什么不使用jQuery的:last选择器(http://api.jquery.com/last-selector/)，然后.trigger点击事件的第一项使用:first选择器(http://api.jquery.com/first-selector/)?

我敢肯定这些会帮你完成工作。

Answer 2

你可以使用下面的代码片段来循环播放你的视频:

(function ($) {
    $(document).ready(function () {
        // Here I am caching the video element in a variable
        var $video = $('#backgroundVideo_video');
        $video.on('ended', function () {
            var video  = $(this).get(0);
            var player = video.player;
            player.loop(true);
        });
    });
})(jQuery);