Javascript 引导视频选项卡，仅在单击选项卡时加载视频

我正在使用bootstrap，我的网站上有一个部分使用bootstrap中的导航选项卡，问题是这些选项卡包含视频。我一共有14个视频标签。一切正常，我要处理的问题是网站加载缓慢，我想这可能是因为加载了所有视频，甚至是隐藏标签中的视频

我怎么可能告诉浏览器仅当选项卡处于.active状态时才加载视频

我的HTML我在这里显示三个选项卡，但总共有14个：

<ul class="nav nav-tabs" id="videos">
        <li class="active"><a data-toggle="tab" href="#one">1 &nbsp;<span class="glyphicon glyphicon-ok" style="color:green;"></span></a>
        </li>
        <li><a data-toggle="tab" href="#two">2 &nbsp;<span class="glyphicon glyphicon-ok" style="color:green;"></span></a>
        </li>
        <li><a data-toggle="tab" href="#three">3 &nbsp;<span class="glyphicon glyphicon-ok" style="color:green;"></span></a>
        </li>
</ul>




 <div class="tab-content">

                <div id="one" class="tab-pane fade in active">
                    <div class="col-lg-6 col-md-6 video-nr">
                        <h3>Video 1</h3>
                    </div>
                    <div class="col-lg-12 col-md-12 col-xs-12 col-xm-12">
                        <div class="embed-responsive embed-responsive-16by9 video">
                            <video controls>
                                <source src="video-1.mp4" type="video/mp4">
                                <source src="video-1.webm" type="video/webm">
                                        Your browser does not support the video tag.
                            </video>
                        </div>
                    </div>
                </div>

                <div id="two" class="tab-pane fade">
                    <div class="col-lg-6 col-md-6 video-nr">
                        <h3>Video 2 </h3>
                    </div>
                    <div class="col-lg-12 col-md-12 col-xs-12 col-xm-12">
                        <div class="embed-responsive embed-responsive-16by9 video">

                            <video controls>
                                <source src="video-2.mp4" type="video/mp4">
                                <source src="video-2.webm" type="video/webm">
                                        Your browser does not support the video tag.
                            </video>
                        </div>
                    </div>
                </div>

                <div id="three" class="tab-pane fade">
                    <div class="col-lg-6 col-md-6 video-nr">
                        <h3>Video 3</h3>
                    </div>
                    <div class="col-lg-12 col-md-12 col-xs-12 col-xm-12">
                        <div class="embed-responsive embed-responsive-16by9 video">                  
                            <video controls>
                                <source src="video-3.mp4" type="video/mp4">
                                <source src="video-3.webm" type="video/webm">
                                        Your browser does not support the video tag.
                            </video>
                        </div>
                    </div>  
                </div>
    </div>

---

您是否考虑过使用视频播放器，如或提供播放列表，而不是使用多个选项卡？否则你可能会发现自己正在建造一个。加载是一个问题，处理开始和停止以避免播放多个视频将是下一个问题。如果需要这样做，您必须将单击侦听器添加到选项卡控件中，并动态加载视频。我对视频播放器不感兴趣。默认情况下，HTML5视频不会自动播放。所以这不是问题。唯一的问题是我不想加载它们。当单击选项卡时，应该使用ajax从服务器加载视频