Question

我想在播放vimeo嵌入时向div添加一个类。我在Vimeo API找到了一些信息。 This is the fiddle我结束了。它适用于左视频，当你播放它时，测试器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中。这就是解决方案不再起作用的问题。澄清我把2个小提琴放在一起的事情。

This fiddle有效。播放视频时，黄色测试器div变为红色。

This fiddle无效。首先单击绿色的“视频1”按钮，然后播放器显示。但是当你按下它时，黄色测试器div不会变成红色。

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

Answer 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

在播放vimeo嵌入时向div添加一个类

1 个答案: