模态关闭时停止 youtube 视频
Posted
技术标签:
【中文标题】模态关闭时停止 youtube 视频【英文标题】:Stopping a youtube video when Modal is closed 【发布时间】:2015-08-06 06:28:36 【问题描述】:我正在尝试使用 Bootstrap 的 Modal 在我正在开发的网站上播放 youtube 视频,但我遇到了一个问题。我从这里阅读提示:Bootstrap 3 and youtube in Modal
唯一对我来说效果很好的是:
Jeremy Kenedy Fiddle
但问题是,当我在播放视频时单击模态框外部将其关闭时,视频不会停止,所以我仍然可以在后台听到它。我尝试搜索答案:google、youtube、***,但没有任何效果。
我一直在阅读以使用 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 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 代码,但它似乎不起作用。你介意帮帮我吗?
非常感谢你,我会感谢我得到的每一个帮助!
蒂娜
【问题讨论】:
【参考方案1】:看看这个fiddle。
我使用了 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 here 的更多信息。
希望这行得通,
图格兹里达。
【讨论】:
嗨@Tina,如果这个或任何答案解决了您的问题,请点击复选标记考虑accepting it。这向更广泛的社区表明您已经找到了解决方案,并为回答者和您自己提供了一些声誉。没有义务这样做。【参考方案2】:这对我有用:
<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);
);
【讨论】:
以上是关于模态关闭时停止 youtube 视频的主要内容,如果未能解决你的问题,请参考以下文章
使用Light YouTube嵌入模态(从基础显示) - 如何在模态窗口关闭后停止视频播放?
关闭手风琴 div 时停止播放 YouTube 视频 [重复]
html 关闭Modal(BootStrap)时停止Youtube视频