如何解决在自定义模式关闭时停止播放 YouTube 视频
你好,很棒的溢出者。
我设法实现了一个漂亮、简单的模式,当点击缩略图 img 时,它会显示一个 youtube 视频。 我的挑战是我似乎无法在模式关闭后停止播放视频。
我在这里尝试了很多想法和脚本,但其中很多都与 Bootstrap 模态相关,我似乎找不到将它们的脚本添加到我的自定义模态的方法。
谁能看到一个可能停止视频播放的简单解决方案? 任何帮助将不胜感激。谢谢
到目前为止我使用过:
$jQuery('.modal-content iframe').attr('src','');
尝试将 scr 替换为空,以便视频无法再播放,但是当我将其添加到代码的这一部分时,这不起作用:
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = "none";
$jQuery('.modal-content iframe').attr('src','');
}
};
-- 完整的 JS 脚本 --
<script type="text/javascript">
jQuery(".modalBtn").click(function() {
// Get the ID name for the modal from the data-attribute
var id = jQuery(this).attr('toggle-modal');
// Use the ID from associated Modal that matches the attriutes name
var modal = document.getElementById(id);
// Get Modal close button
var closeModalBtn = document.getElementsByClassName("close");
// Open Modal
modal.style.display = "block";
// Close Modal when clicking anywhere outside of modal
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = "none";
$jQuery('.modal-content iframe').attr('src','');
}
};
// Close Modal Function
function closeModal() {
modal.style.display = "none";
$jQuery('.modal-content iframe').attr('src','');
}
for (var i = 0; i <= closeModalBtn.length; i += 1) {
closeModalBtn[i].onclick = closeModal;
}
});
</script>
-- 触发它的 HTML --
<div id="MyModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<iframe src="https://www.youtube.com/embed/hiddenid" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
解决方法
您必须获得视频元素, “html5-main-video”是youtube视频类名称,因此您可以在关闭之前的模型中使用暂停停止视频
var video = document.getElementsByClassName("html5-main-video")[0]
video.pause()
您可以在 youtube 控制台中尝试此代码,您将看到视频停止
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。