我需要能够在 Twitter Bootstrap 模式打开时自动播放 YouTube 视频,然后在关闭时停止该视频。
我知道这个问题之前已经被问过,但我能找到的答案会导致包含许多视频的页面出现大量 javascript 代码,我正在努力减少膨胀。到目前为止,我对各个视频进行了以下工作,但问题是每个模式和每个视频都必须使用正确的变量重复此 JavaScript 代码。
$('#vidThumbnail-1').click(function () {
var src = 'http://www.youtube.com/embed/8bKmrhI-YT8?&autoplay=1';
$('#vid1').modal('show');
$('#vid1 iframe').attr('src', src);
//Fit Vids Implamented Below for Mobile Compatibility
$("#vid1Thumbnail-1 iframe").wrap("<div class='flex-video'/>");
$(".flex-video").fitVids();
});
$('#vid1 button').click(function () {
$('#vid1 iframe').removeAttr('src');
});
HTML:
<div id="vidThumbnail-1"><img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg" /></div>
<div id="vid1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<iframe src="http://www.youtube.com/embed/8bKmrhI-YT8" width="640" height="360" frameborder="0" allowfullscreen></iframe>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
</div>
当您有 20 个视频和 20 个模态时,这会变得臃肿!
有没有办法利用数据属性方法来启动内置的模态引导程序,而不是单独调用它,同时仍然仅在目标模态中修改 iframe src?打开模式的链接将是:
<a href="#vid1" role="button" data-toggle="modal">
<img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg"></a>
Then:
- 读取目标模态中 iframe 的现有 src 属性(将其设置为变量?)
- 在现有 src 属性后附加“&autoplay=1”以启动视频。
- 关闭模式时将 src 属性替换为原始属性(通过像上面这样的按钮就可以了)。
这样我就不需要为每个单独的模态编写脚本,节省了大量时间和臃肿的 JS。但是,我不知道从哪里开始修改 bootstrap.js 来完成此任务,而且我在 JS(或任何)编程方面没有经验。感谢你给与我的帮助!
我的解决方案:
- do not add
&autoplay=1
手动到 iframe src
然后添加这个脚本:
var videoSrc = $("#myModal iframe").attr("src");
$('#myModal').on('show.bs.modal', function () { // on opening the modal
// set the video to autostart
$("#myModal iframe").attr("src", videoSrc+"&autoplay=1");
});
$("#myModal").on('hidden.bs.modal', function (e) { // on closing the modal
// stop the video
$("#myModal iframe").attr("src", null);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)