Bootstrap视频选项卡，仅在单击选项卡时加载视频

Question

我正在使用bootstrap，我在我的网站上使用引导程序中的nav-tabs有一个部分，问题是此选项卡包含视频。我总共有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>