在Bootstrap模式下停止Vimeo视频,可以使用Vimeo Player API来实现。以下是一种可能的解决方案:
<head>
标签内添加以下代码:<script src="https://player.vimeo.com/api/player.js"></script>
<div id="vimeo-player"></div>
<script>
var player = new Vimeo.Player('vimeo-player', {
url: 'https://vimeo.com/VIDEO_ID' // 替换为实际的Vimeo视频URL或ID
});
</script>
确保将 VIDEO_ID
替换为实际的Vimeo视频的URL或ID。
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
打开模态框
</button>
<!-- 模态框关闭事件监听器 -->
<script>
var modal = document.getElementById('exampleModal');
modal.addEventListener('hide.bs.modal', function (event) {
player.pause(); // 停止视频播放
});
</script>
确保 exampleModal
是模态框的ID,你可以根据自己的实际代码进行调整。
这样,当用户在Bootstrap模态框关闭时,Vimeo视频将会被暂停播放。你可以根据实际需求进行修改和调整,例如在模态框显示时自动开始播放等。
推荐的腾讯云产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云