Question

我构建了一个带有标签引导程序的精选标签系统（4个标签）。它手动工作，但我希望在视频结束时自动循环。

这是我的代码：

<div id="tab">

  <ul class="nav nav-tabs nav-tabs-video">
     <li role="presentation" class="tab-1 active"><a href="#tab-1" data-toggle="tab">TAB - 1</a></li>
     <li role="presentation" class="tab-2"><a href="#tab-2" data-toggle="tab">TAB - 2</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="tab-1">
      <video controls data-iframe-src="img/TIPS/01.mov">
      <source src="img/TIPS/01.mov">
        Your browser does not support the video tag.
      </video>
    </div>
    <div class="tab-pane" id="tab-2">
      <video controls data-iframe-src="img/TIPS/02.mov">
      <source src="img/TIPS/02.mov">
       Your browser does not support the video tag.
      </video>
    </div>          
  </div>

</div>

$('.tab-pane > video').on('ended', function(event){

    index = $(".tab-pane").index();
    ind = parseInt(index)+1;

    $("#tab-"+ind).addClass('active');

    var videoSRC = $('video').attr('data-iframe-src');
    var vid = $('#tab-'+ind).find('video').attr('src', videoSRC);
    vid[0].play();

})

现在，视频似乎在＃tab-1上循环播放，对我做错了什么建议？或者我可以改变什么？

这是我的新代码，它适用于下一个标签和视频播放[已解决]

$('.tab-pane > video').on('ended', function(event) {
    $('.nav-tabs li').filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
})

var last = $('.tab-pane:last-child');
$(last).find('video').on('ended', function(){
    $('.nav-tabs li:first').addClass('.active').find('a[data-toggle="tab"]').tab('show');

})

/* current active */
$('ul.nav-tabs > li > a').on('shown.bs.tab', function(e){
    var target = $(e.target).attr('href');
    var videoSRC = $('video').attr('data-iframe-src');
    if(target){
        var vid = $('.tab-feature' + target ).find('video').attr('src', videoSRC);
        vid[0].load();
        vid[0].play();
    } 
    console.log('active' + target);

})

/* before active */
$('ul.nav-tabs > li > a').on('hide.bs.tab', function(e){
    var prevtarget = $(e.target).attr('href');
    var videoSRC = $('video').attr('data-iframe-src');
    if(prevtarget){
        var prev = $('.tab-feature' + prevtarget).find('video').attr('src',videoSRC);
        prev[0].pause();
    }
    console.log('prev' + prevtarget);
})

Answer 1

我认为您需要显示下一个标签，然后尝试在该标签上播放视频

$('.tab-pane > video').on('ended', function(event) {
  var $active = $('#tab > ul.nav li.active');
  var $next = $active.next();
  if ($next.length) {
    $next.tab('show');
    var $panel = $($next.find('a').attr('href'));
    var $video = $panel.find('video');
    if ($video.length) {
      _v = $video[0]
      $video[0].play();
    }
  }
})

当视频结束时，Jquery选择下一个选项卡bootstrap

1 个答案: