Простая пауза с vimeo api Froogaloop

Попытка вызвать vimeo API для приостановки видео в событии клика, чтобы скрыть его. И, нажав, чтобы снова открыть видео, воспроизведите видео с места паузы.

Здесь есть разные связанные вопросы, я не могу найти ответ на простой «как сделать паузу». Я новичок в jquery и не могу разобраться в документации froogaloop.

Вот FIDDLE и мой текущий скрипт jquery для скрытия видео

$(document).click(function (event) {
    if (!$(event.target).hasClass('click')) {
        $('#video').hide();
    }      
});

который скрывает его, когда щелкают элемент без класса «щелчок». Но видео воспроизводится в фоновом режиме. Foogaloop загружается в скрипку. Всем спасибо


javascript jquery vimeo vimeo-api froogaloop
person user2985093    schedule 14.05.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вот обновленный FIDDLE, который заставляет паузу/воспроизведение работать так, как я себе представлял. Нажмите на изображение, чтобы воспроизвести видео; щелкните снаружи или на пустом месте (вы управляете этим с помощью классов), чтобы приостановить его; щелкните изображение еще раз, чтобы воспроизвести его с места паузы. Простой, без кнопок, без лишнего кода jquery или froogaloop.

Разместите это здесь для тех, кому это может быть полезно. И +1 к mbrrw за то, что я начал.

var iframe = $('#video iframe')[0];
var player = $f(iframe);

$('.showvideo').on('click', function(){
    $('#video').show();
    $('.image').hide();
    player.api('play');
});

$(document).click(function (event) {
          if (!$(event.target).hasClass('click')) { //if what was clicked does not have the class 'click' (ie. any empty space)
    $('#video').hide();
    $('.image').show();
    player.api('pause');
          }
});

Не забудьте добавить api=1 к ссылке vimeo. И URL-адрес должен быть https, а не http.

person user2985093    schedule 17.05.2015

arrow_upward
1
arrow_downward

froogaloop может быть занозой в заднице.

Код для начала находится здесь: https://developer.vimeo.com/player/js-api#universal-with-froogaloop

Я адаптировал это, чтобы заставить его работать, я думаю, как вы ожидаете здесь: https://jsfiddle.net/fLe5xs4v/

Настраиваем так:

var iframe = $('#video iframe')[0];
var player = $f(iframe);

Обратите внимание, что если вы измените текст на кнопках воспроизведения и паузы, вы нарушите этот код:

$('button').bind('click', function() {
    player.api($(this).text().toLowerCase());
});

Дайте ему шанс, он должен заставить вас двигаться в правильном направлении, по крайней мере. Удачи!

person mbrrw    schedule 14.05.2015
comment
Функционал почти правильный. Если бы нажатие на пустое место было похоже на нажатие кнопки паузы. Я бы хотел, чтобы это было без кнопок и в соответствии с кодом, который у меня уже есть. Я попробовал, но var приводит к поломке существующего кода, если я не объявлю их после... Я не уверен, как вызвать API без «кнопки». Я не знаю, к чему его привязать. Мне не нужен API для игры, это уже сделано. Мне нужен API для паузы. Поскольку я пытаюсь инициировать событие на основе чего-то, чего нет (отсутствие класса «щелчок»), а не чего-то, что есть, мне не к чему привязать вызов. - person user2985093; 15.05.2015