twitter-bootstrap – 播放和停止置于Bootstrap模式中的Vimeo视

发布时间：2020-12-17 20:40:44 所属栏目：安全来源：网络整理

导读：我在Bootstrap视频中有一个Vimeo iframe视频.我需要让它在我触发模态时开始播放并在模态关闭时停止播放.目前我可以通过拥有没有src属性的iframe并在触发模态上填充jQuery来开始模态打开.这是代码片段; jQuery("#videogumb").click(function() { jQuery('#myM

我在Bootstrap视频中有一个Vimeo iframe视频.我需要让它在我触发模态时开始播放并在模态关闭时停止播放.目前我可以通过拥有没有src属性的iframe并在触发模态上填充jQuery来开始模态打开.这是代码片段;

jQuery("#videogumb").click(function() {
    jQuery('#myModal .modal-body iframe').attr('src','the-source-code');
    });

这工作正常,我开始模态打开时开始,但当我关闭模态时,音乐继续在后台播放.

另一种方法可以正常工作,但仅用于关闭模态而不将其设置为自动播放.所以autoplay设置为0,我有这个片段;

jQuery(".modal-backdrop,#myModal .close,#myModal .btn").live("click",function() {
    jQuery("#myModal iframe").attr("src",jQuery("#myModal iframe").attr("src"));
    });

当我关闭模态时,这会停止视频.
我需要以某种方式结合这个.当模态打开时我需要自动播放并在模态关闭时停止播放.

有线索吗？

谢谢.

解决方法

要添加到eroedig的答案,请查看Vimeo的文档 Calling the API with Froogaloop.

>在通用嵌入代码中添加？api = 1& player_id = vimeoplayer,例如：

<iframe src="//player.vimeo.com/video/116160160?api=1&player_id=vimeoplayer&title=0&amp;byline=0&amp;portrait=0" name="vimeoplayer" id="nofocusvideo" width="615" height="346" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

>注意 – 我给它一个名为’nofocusvideo’的ID,将在这里看到：

var iframe = document.getElementById('nofocusvideo');

>在eroedig的JS上面声明2个变量,如：

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
var iframe = document.getElementById('nofocusvideo');
// $f == Froogaloop
var player = $f(iframe);

$('.modal').on('hidden.bs.modal',function () {
player.api('pause');
})

$('.modal').on('shown.bs.modal',function () {
player.api('play');
})
</script>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!