循环播放列表 - jquery - videojs

Question

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

    // 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/）在第一个项目上的click事件？

很确定这些可以为你完成工作。

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);