javascript - 使用 jquery 停止页面上的任何 vimeo 视频

Question

抱歉我的经验不足。我得到了一段特定的 html 代码:

    <div class="embedded-video" style="display: block;">
        <span class="fa fa-times-circle video-closer">Close</span>
        <p></p>
        <div>
            <iframe allowfullscreen class="roots-video" frameborder="0" height="360" src="https://player.vimeo.com/video/155722997?title=0&amp;byline=0&amp;portrait=0" style="display: block;" width="640"></iframe>
        </div>
        <div>
            <iframe allowfullscreen class="roots-video" frameborder="0" height="360" id="spvideo" name="spvideo" src="https://player.vimeo.com/video/155722997?title=0&amp;autopause=1&amp;byline=0&amp;portrait=0" style="display: block;" width="640"></iframe>
        </div>
    </div>

我需要一个“关闭”按钮来停止视频，无论当前正在播放哪个视频，还是正在播放的所有视频，因为您一次只能播放一个。

我使用了从 https://stackoverflow.com/a/12932722/3808307 复制的解决方案

添加

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

和

var iframe = $('.roots-video')[0];
var player = $f(iframe);

$('.video-closer').click(function() {
    alert('stoped');
    player.api('pause');
});

但它显然只适用于第一个视频。如何让数组的所有元素都起作用？我不关心这里的性能，我只想在无法识别正在播放哪个视频的情况下关闭所有正在播放的视频

Answer 1

我不知道它是如何工作的，只是根据您现有的代码进行猜测

$('.video-closer').click(function() {
    $('.roots-video').each(function(){
       var ele = $f(this);
       ele.api('pause');
    });
});