我试图使用Bootstrap的模式在我正在工作的网站上播放youtube视频,但我有一个问题。我从这里阅读提示:Bootstrap 3和youtube在Modal
,唯一一个似乎对我很有效的是:
Jeremy kennedy Fiddle
但问题是,当我点击模态外部关闭它,而视频正在播放,视频不停止,所以我仍然可以听到它在背景中。我试着搜索答案:谷歌、youtube、stackoverflow,但都没用。
我继续阅读以使用hidden.bs.modal。我搜索了又搜索,玩了又玩,但它仍然在后台播放。下面是我的代码:
HTML:<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s">VIDEO</a>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div>
<iframe width="100%" height="350" src=""></iframe>
</div>
</div>
</div>
</div>
JS文件:
autoPlayYouTubeModal();
//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
function autoPlayYouTubeModal() {
var trigger = $("body").find('[data-toggle="modal"]');
trigger.click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-theVideo"),
videoSRCauto = videoSRC + "?autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
$("#videoModal").on('hidden.bs.modal', function (e) {
$("#videoModal iframe").attr("src", $("#videoModal iframe").attr("src"));
});
});}
我添加了hidden.bs.modal代码,我在该页面上的一个答案中发现,但它似乎不工作。你介意帮我一下吗?
非常感谢你,我会感激你给我的每一个帮助!
蒂娜看看这个小提琴
我使用了YouTube IFrame API,它允许视频轻松启动和停止,只需几行代码。当前,小提琴在模态打开后开始播放视频,并在模态关闭后立即停止播放。
var player;
function loadVideo() {
player = new YT.Player('player', {
width: '100%',
videoId: 'loFtozxZG0s',
});
}
$('#myModal').on('hide.bs.modal', function (e) {
player.stopVideo();
});
$('#myModal').on('shown.bs.modal', function (e) {
player.playVideo();
});
loadVideo函数在#player
div中创建一个新的YouTube播放器。这是设置视频的地方,videoId
。
下一个函数在hide.bs.modal
上停止视频,该函数在模态开始关闭时立即触发。
最后一个函数启动shown.bs.modal
的视频,该视频在模式显示后触发。
你可以在这里找到更多关于YouTube IFrame API的信息。
希望这行得通,
Tugzrida .
这个适合我:
<script>
//function to get and autoplay youtube video from datatag:
function autoPlayYouTubeModal(){
var trigger = $("body").find('[data-toggle="modal"]');
trigger.click(function() {
var theModal = $(this).data( "target" ),
videoSRC = $(this).attr( "data-theVideo" ),
videoSRCauto = videoSRC+"?rel=0&autoplay=1" ;
$(theModal+' iframe').attr('src', videoSRCauto);
$(theModal+' button.close').click(function () {
$(theModal+' iframe').attr('src', videoSRC);
});
$(theModal).on('hide.bs.modal', function (e) {
$(theModal+' iframe').attr('src', videoSRC);
});
});
}
//the function call:
$(document).ready(function(){
autoPlayYouTubeModal();
});
</script>
我补充说:
$(theModal).on('hide.bs.modal', function (e) {
$(theModal+' iframe').attr('src', videoSRC);
});