twitter-bootstrap - 在 Bootstrap 选项卡更改上暂停视频

Question

已经询问了这个问题的各种版本，但我找不到涉及多个视频和 Bootstrap 选项卡的太多内容。

我需要的是让给定的播放器在单击另一个选项卡时暂停。

 <div class="row">
            <div class="col-lg-12">
                <ul class="nav nav-tabs" role="tablist" id="myTab">
                    <li class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab1</a></li>
                    <li><a href="#tab2" role="tab" data-toggle="tab">Tab2</a></li>
                    <li><a href="#tab3" role="tab" data-toggle="tab">Tab3</a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane fade in active" id="tab1">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe id="video1" class="embed-responsive-item" src="//www.youtube.com/embed/7kq5f_apsuM?enablejsapi=1"></iframe>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab2">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe id="video2" class="embed-responsive-item" src="//www.youtube.com/embed/yWqG8ysc3BE?enablejsapi=1"></iframe>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab3">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe id="video3" class="embed-responsive-item" src="//www.youtube.com/embed/EVfGs78wD-c?enablejsapi=1"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>   

这是一个 jsFiddle: http://jsfiddle.net/o4eebLp4/

Answer 1

我使用 native Bootstrap 选项卡事件找到了这个解决方案。这是经过长时间搜索而不使用 iframe 或视频 ID 的任何特殊定位的最佳解决方案。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var iframe = $(e.relatedTarget.hash).find('iframe'); 
  var src = iframe.attr('src');
  iframe.attr('src', '');
  iframe.attr('src', src);
});