2

我想在播放 vimeo 嵌入时向 div 添加一个类。我在Vimeo API上找到了一些信息。这是我最终得到的小提琴。它适用于左侧视频，当你播放它时，tester div 变为红色，当你暂停它时，它变为黄色。我如何更改代码以使其适用于两个视频？或者更具体地说，在任何数量的 vimeo 嵌入上？

只是为了完整起见，这是我使用的代码：

HTML：

<iframe id="player1" 
    src="http://player.vimeo.com/video/27855315?api=1&player_id=player1"
    width="400" height="225" frameborder="0"
    webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

<iframe id="player2"
    src="http://player.vimeo.com/video/27855375?api=1&player_id=player2"
    width="400" height="225" frameborder="0"
    webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

<p>Video status: <span class="status">...</span></p>
<div id="tester"></div>

CSS：

#tester{
  background-color:yellow;
  width:100px;
  height:100px;
}

#tester.playing{
  background-color:red;
}

JS/jQuery：

var iframe = $('#player1')[0],
    player = $f(iframe),
    status = $('.status');

// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
    status.text('ready');

    player.addEvent('pause', onPause);
    player.addEvent('finish', onFinish);
    player.addEvent('playProgress', onPlayProgress);
});

// Call the API when a button is pressed
$('button').bind('click', function() {
    player.api($(this).text().toLowerCase());
});

function onPause(id) {
    $('#tester').removeClass('playing');
}

function onFinish(id) {
    $('#tester').removeClass('playing');
}

function onPlayProgress(data, id) {
    $('#tester').addClass('playing');
}

更新：

我将 vimeo 动态添加到一个空的 iframe 中。这就是解决方案不再起作用的问题所在。为了澄清事情，我把两个小提琴放在一起。

这个小提琴有效。当您播放视频时，黄色测试仪 div 变为红色。

这个小提琴不起作用。首先单击绿色的“视频1”按钮，然后播放器显示。但是当你按下它时，黄色的测试器 div 不会变成红色。

我无法弄清楚问题是什么。当我检查元素时，两个 iframe 在渲染时看起来完全相同。有什么区别，为什么当我动态加载 src 时它不起作用？

4

1 回答 1

1

您可以向所有播放器 iframe 添加一个类，因此在代码中您只需要检查播放器是否具有该类并更改您想要的任何内容。

此外，您似乎还必须在 js 中定义播放器并每次绑定事件。可能有更好的方法可以做到这一点，但我只是查看了代码并想出了这个

http://jsfiddle.net/HfwWY/2558/

<iframe id="player1" class="change" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<iframe id="player2" class="change" src="http://player.vimeo.com/video/27855375?api=1&player_id=player2" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

JS

var iframe = $('.change');

iframe.each( function() {
    var player = $f( $(this)[0] );
    // When the player is ready, add listeners for pause, finish, and playProgress
    player.addEvent('ready', function() {
        status.text('ready');

        player.addEvent('pause', onPause);
        player.addEvent('finish', onFinish);
        player.addEvent('playProgress', onPlayProgress);
    });

} );

var status = $('.status');

随意将类更改更改为更有意义的内容，例如 videoPlayer 或其他内容，只需确保更改也应用于 js

于 2014-04-03T14:42:44.137 回答