问题描述
我的网站上有一个包含视频的模式。当我单击模态(单击模态外的背景、关闭按钮等)时,模态已关闭,但视频仍在后台运行。
我已经测试了我在 stackoverflow 上找到的所有解决方案,但似乎没有任何效果。
这是我的 html(可能不是最好的代码):
$('.modal').on('hidden.bs.modal',function() {
$('video').each(function() {
this.player.pause();
});
})
<div class="modal fade" id="tutorialModal" tabindex="-1" role="dialog" aria-labelledby="tutorialModal" aria-hidden="true" style="z-index:99999;">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content" style="-webkit-Box-shadow: 4px 4px 14px -2px rgba(0,0.75); -moz-Box-shadow: 4px 4px 14px -2px rgba(0,0.75); Box-shadow: 4px 4px 14px -2px rgba(0,0.75); min-width:750px !important">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle"><img src="../images/logo.svg" height="60px"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h4>Lorem ipsum!</h4>
<p>Lorem ipsum.</p>
<br>
<center>
<div style="width:500px;border-style:solid;border-color:#fafaf9">
<video id="highlightfilter" class="video-js vjs-fluid" controls preload="auto" width="555" height="300" poster="../videos/tutorial_thumbnail.png" data-setup='{}'>
<source src="../videos/tutorial.mp4" type="video/mp4">
</video>
</div>
</center>
<p>Some text... Text leads to a <a href="../link">link</a>.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
我发现了不同的脚本,主要是这样的(我把代码放在结束正文标签之前):
$('.modal').on('hidden.bs.modal',function () {
$('video').each(function() {
this.player.pause();
});
})
但没有任何效果...你有什么想法吗?
非常感谢!
于洛特
解决方法
this.player 是一些 jquery 的东西?
我默认看到你遇到问题的地方,所以我展示了一个简单的例子。
另见https://www.w3schools.com/tags/av_met_pause.asp
document.querySelectorAll('video').foreEach(HTMLVideoElement.prototype.pause)
document.querySelectorAll('whatever').forEach(console.error)
如果您能进一步说明我的回复对您有何帮助,我将尝试改进它。