Vimeo的API与多个视频工作 [英] Vimeo API not working with multiple videos

问题描述

我在使用多个视频的Vimeo的API一些麻烦。在code我使用暂停

 ＆LT;音频ID =音频播放器自动播放=自动播放循环＆GT;
＆lt;信源SRC =音乐/ peanutbutter.mp3TYPE =音频/ MPEG＆GT;
＆LT; /音频＆GT;
 

在玩，但它只能工作在第一视频iframe中。如果我点击第二，第三或第四VIMEO内部框架的播放按钮遗憾的是它没有暂停页面上的音频。这可能是一个简单的修复，但我快要疯了试图弄清楚这一点。谢谢！

 ＆LT;脚本SRC =htt​​p://a.vimeocdn.com/js/froogaloop2.min.js＆GT;＆LT; / SCRIPT＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{VAR vimeoPlayer = document.querySelector（'IFRAME'）;$ F（vimeoPlayer）.addEvent（'准备好'，准备）;功能就绪（player_id）{    froogaloop = $ F（player_id）;    功能setupEventListeners（）{
        功能onPlay（）{
            froogaloop.addEvent（'玩'，
            功能（）{
                $（＃音频播放机）[0] .pause（）;
                $（＃头按钮声音播放），隐藏（）;
                $（＃头按钮，声音暂停）显示（）。
            }）;
        }        onPlay（）;    }
    setupEventListeners（）;
}}）
＆LT; / SCRIPT＆GT;＆LT; D​​IV ID =DWF拖车级=内容＆GT;＆LT; IFRAME ID =PLAYER_1SRC =htt​​p://player.vimeo.com/video/35740045?api=1&player_id=player_1 WIDTH =745HEIGHT =393FRAMEBORDER =0＆GT;＆LT; / IFRAME＆GT;＆LT; / DIV＆GT;＆LT; D​​IV ID =inkpaper手表级=内容＆GT;＆LT; IFRAME ID =player_2SRC =htt​​p://player.vimeo.com/video/33359230?api=1&player_id=player_2 WIDTH =745HEIGHT =393FRAMEBORDER =0＆GT;＆LT; / IFRAME＆GT;＆LT; / DIV＆GT;＆LT; D​​IV ID =拉蒙手表级=内容＆GT;＆LT; IFRAME ID =player_3SRC =htt​​p://player.vimeo.com/video/44427351?api=1&player_id=player_3 WIDTH =745HEIGHT =393FRAMEBORDER =0＆GT;＆LT; / IFRAME＆GT;＆LT; / DIV＆GT;＆LT; D​​IV ID =thatsunday手表级=内容＆GT;＆LT; IFRAME ID =player_4SRC =htt​​p://player.vimeo.com/video/46602515?api=1&player_id=player_4 WIDTH =745HEIGHT =393FRAMEBORDER =0＆GT;＆LT; / IFRAME＆GT;＆LT; / DIV＆GT;
 

解决方案

没关系！弄清楚了。

更换code的该位

  $ F（vimeoPlayer）.addEvent（'准备好'，准备）;
 

有了这个

 的jQuery（IFRAME）。每个（函数（）{
            Froogaloop（本）.addEvent（'准备好'，准备）;
}）;
 

固定的问题！因此，工作的javascript code是

 ＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{jQuery的（'IFRAME'）。每个（函数（）{
            Froogaloop（本）.addEvent（'准备好'，准备）;
}）;功能就绪（player_id）{    froogaloop = $ F（player_id）;    功能setupEventListeners（）{
        功能onPlay（）{
            froogaloop.addEvent（'玩'，
            功能（）{
                $（＃音频播放机）[0] .pause（）;
                $（＃头按钮声音播放），隐藏（）;
                $（＃头按钮，声音暂停）显示（）。
            }）;
        }        onPlay（）;    }
    setupEventListeners（）;
}}）
＆LT; / SCRIPT＆GT;
 

感谢
http://labs.funkhausdesign.com/examples/vimeo/froogaloop2-api -basics.html

您的帮助！

I'm having some trouble using the Vimeo API with multiple videos. The code I'm using pauses the

<audio id="audio-player" autoplay="autoplay" loop>
<source src="music/peanutbutter.mp3" type="audio/mpeg">
</audio>

from playing, but it's only working on the first video iframe. If I click the Play button on the 2nd, 3rd, or 4th vimeo iframes it unfortunately isn't pausing the audio on the page. It's probably a simple fix but I'm going crazy trying to figure this out. Thanks!

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

<script type="text/javascript">
$(function(){

var vimeoPlayer = document.querySelector('iframe');

$f(vimeoPlayer).addEvent('ready', ready);

function ready(player_id) {

    froogaloop = $f(player_id);

    function setupEventListeners() {
        function onPlay() {
            froogaloop.addEvent('play',
            function(){
                $("#audio-player")[0].pause();
                $("#header-button-sound-play").hide();
                $("#header-button-sound-pause").show();
            });
        }

        onPlay();

    }
    setupEventListeners();
}

}) 
</script>

<div id="dwf-trailer" class="content"><iframe id="player_1" src="http://player.vimeo.com/video/35740045?api=1&player_id=player_1" width="745" height="393" frameborder="0"></iframe></div>

<div id="inkpaper-watch" class="content"><iframe id="player_2" src="http://player.vimeo.com/video/33359230?api=1&player_id=player_2" width="745" height="393" frameborder="0"></iframe></div>

<div id="ramon-watch" class="content"><iframe id="player_3" src="http://player.vimeo.com/video/44427351?api=1&player_id=player_3" width="745" height="393" frameborder="0"></iframe></div>

<div id="thatsunday-watch" class="content"><iframe id="player_4" src="http://player.vimeo.com/video/46602515?api=1&player_id=player_4" width="745" height="393" frameborder="0"></iframe></div>

解决方案

Nevermind! Figured it out.

Replacing this bit of code

$f(vimeoPlayer).addEvent('ready', ready);

With this

jQuery('iframe').each(function(){
            Froogaloop(this).addEvent('ready', ready);
});

fixed the problem! So the working javascript code is

<script type="text/javascript">
$(function(){

jQuery('iframe').each(function(){
            Froogaloop(this).addEvent('ready', ready);
});

function ready(player_id) {

    froogaloop = $f(player_id);

    function setupEventListeners() {
        function onPlay() {
            froogaloop.addEvent('play',
            function(){
                $("#audio-player")[0].pause();
                $("#header-button-sound-play").hide();
                $("#header-button-sound-pause").show();
            });
        }

        onPlay();

    }
    setupEventListeners();
}

}) 
</script> 

Thanks to http://labs.funkhausdesign.com/examples/vimeo/froogaloop2-api-basics.html

for the help!

这篇关于Vimeo的API与多个视频工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！