javascript - 关闭模式时停止视频(videojs)
问题描述
我使用 videojs 插件来自定义视频播放器。
我有 30 个模态,每个模态都有一个不同的视频(Youtube、Dailymotion、Vimeo)。
我添加了两个按钮 next/prev 在每个模态之间传递(模态始终打开)。
一切正常。每个视频都显示得很好。
但我有两个问题:
- 每次我打开一个新模式时,都会自动播放视频。
- 当我关闭模式时,视频会继续播放。
对于我的代码摘录,我使用了 ID #popin-1
,但每个模式都有不同的 IDid="popin-1", id="popin-2", id="popin-3", id="popin-4"
每个模态的链接如下所示:
<a href="#" class="btn-open" data-modal="popin-1">Open my modal</a>
每个模态的 HTML 代码:
<div id="popin-1" class="popin__item">
<div class="popin__wrapper btn-action">
<div class="popin__inner">
<a href="#" class="btn-close btn-action"></a>
<div class="popin__canva">
<div class="popin__video">
<a href="#" class="btn-next"></a>
<a href="#" class="btn-prev"></a>
<div class="popin__video-container">
<video
id="vid-1"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
autoplay
width="640" height="264"
data-setup='{ "techOrder": ["youtube"], "autoplay": true, "fluid": true, "sources": [{ "type": "video/youtube", "src": "http://my-video-url.com"}] }'
>
</video>
</div>
</div>
<div class="popin__content">
<p>Some text</p>
</div>
</div>
</div>
</div>
</div>
最后是我的 js 函数。我试过了
$('.btn-open').each(function(i, el) {
var modal = $('#' + $(el).attr('data-modal'));
var overlay = $('.popin__overlay');
var close = $('.btn-action');
var player = videojs('popin__item');
function removeModal() {
modal.removeClass('show');
overlay.removeClass('show');
$('body').removeClass('no-overflow');
modal.player.pause();
}
function removeModalHandler() {
removeModal();
}
$(el).click(function(e) {
e.preventDefault();
modal.addClass('show');
overlay.addClass('show');
$('body').addClass('no-overflow');
});
close.click(function(e) {
if($(e.target).hasClass('btn-action')) {
e.preventDefault();
removeModalHandler();
}
});
});
解决方案
如果您使用的是引导模式,您应该能够使用此代码。
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
推荐阅读
- java - 通用构造函数的用例
- visual-studio - “在iis上打开和创建网站需要在管理员帐户下运行visual studio”
- strapi - 无法在 Strapi 模型中调用生命周期方法?
- php - 散列 PHP 序列化对象 VS 散列序列化对象字符串
- javascript - 为什么在javascript中使用匿名函数表达式时无法访问“this”?
- unit-testing - CI 服务器上的测试和覆盖步骤之间的区别
- awk - awk 中的更多输入文件
- bitbucket - Bitbucket 管道 - 找不到名为的应用程序版本
- html - 社交与导航栏融合
- java - 如何在 SQL 中使用 join 删除记录?