Я хочу добавить класс в div, когда играет vimeo embed. Я нашел информацию о Vimeo API. Это скрипка, с которой я закончил. Он работает с левым видео, когда вы его проигрываете, 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 не становится красным.
Я не могу понять, в чем проблема. Когда я проверяю элемент, оба фрейма при рендеринге выглядят одинаково. В чем разница и почему он работает, когда я загружаю src динамически?
