Приостановить универсальное встраивание Vimeo при скрытии с помощью jQuery

У меня есть видео Vimeo (через универсальный встроенный iframe), скрытое на моей странице. При нажатии на ссылку она появляется, а при нажатии за пределами видео (в стиле лайтбокса) она исчезает и скрывается, но видео продолжает воспроизводиться. Я прочитал в API Vimeo, что вы можете использовать объекты JSON для приостановки видео, но я не понимаю, что они говорят.

HTML:

<img id="show_tide" class="vid" src"#">
<i<iframe id="tide" class="vim" src="http://player.vimeo.com/video/1747304?portrait=0&amp;color=ffffffapi=1" width="726" height="409" frameborder="0"></iframe>

JavaScript:

$('#underlay').click(function() {
    //pause VISIBLE (there are multiple) Vimeo video via API
    $('.vim, #underlay').fadeOut(400);
});

json api jquery vimeo froogaloop
person technopeasant    schedule 08.04.2011    source источник
comment
Я сомневаюсь, что у вас есть <iframe id="tide" class="vim" src="http://google.com"></iframe>, какой там настоящий код?   -  person Khez    schedule 08.04.2011
comment
Вы уверены, что хотите использовать режим iframe? Это будет означать, что кнопки не будут работать в некоторых браузерах...   -  person Khez    schedule 08.04.2011
comment
@Khez Я знаю, но это лучший вариант для мобильного сайта. есть идеи, как закодировать странную паузу json?   -  person technopeasant    schedule 08.04.2011

Ответы (4)


arrow_upward
17
arrow_downward

Вам нужно добавить из одной из библиотек froogaloop.

JS

player=$f(document.getElementById('tide'));// you can use jquery too: $('#tide')[0] 
player.api('pause');

Досадно просто. Вот пример на jsfiddle.net.

person Khez    schedule 08.04.2011
comment
@Khez обновил jsfiddle моим кодом. работает там .. но не работает на странице. вы видите что-нибудь, что может быть конфликтующим? jsfiddle.net/CVWtL/11 - person technopeasant; 08.04.2011
comment
@Khez видео не останавливается на моей странице. я использую функцию, которую я вставил в jsfiddle. Жизни я не могу понять, почему это не работает :// - person technopeasant; 08.04.2011
comment
@Khez снова обновил jsfiddle, на этот раз с другими функциями, которые я использую. все динамичны.. может где-то есть пересечение. jsfiddle.net/CVWtL/13 - person technopeasant; 08.04.2011
comment
Это будет глупо, но... какой элемент возвращает $('.vim')[0]? это iframe? или что-то другое ? - person Khez; 08.04.2011
comment
@Khez возвращает проигрыватель vimeo. я использовал класс, потому что есть несколько видео. мне нужно добавить селектор, например :visible, чтобы сузить его до только активного видео? - person technopeasant; 08.04.2011
comment
@Khez слишком странно .. снял другое видео на jsfiddle. первое видео ставится на паузу надлежащим образом, а второе — нет. jsfiddle.net/CVWtL/16 - person technopeasant; 08.04.2011
comment
ухх КРЫСЫ! по-прежнему не работает с исправленным jsfiddle.net/CVWtL/17 и по-прежнему не работает локально или на хостинге! блевотина! - person technopeasant; 08.04.2011
comment
Вы понимаете, что вам нужно добавить код для второго игрока? jsfiddle.net/Khez/CVWtL - person Khez; 08.04.2011
comment
@Khez... ахахахаха нет, я этого не делал. Цифры от 0 до бесконечности? какой-то конкретный синтаксис? который обрабатывает оба видео, останавливающиеся на jsfiddle, но все еще не работающие в контексте моей страницы. Я рыщу и не могу найти, что это может быть. Сводит меня с ума. - person technopeasant; 08.04.2011
comment
Либо создайте новый вопрос, либо дайте больше кода, либо постарайтесь... Я скоро исчезну. - person Khez; 08.04.2011
comment
@Хез, я тебя слышу. Прилагать усилия. Вот весь код: minimalpluscreative.com/newclients/danielgomes - person technopeasant; 08.04.2011
comment
Вы не включили правильный froogaloop.js minimalpluscreative.com/newclients/danielgomes/ скрипты/ - person Khez; 08.04.2011
comment
@Хез. Я даже не хочу об этом говорить. Ты герой. - person technopeasant; 08.04.2011
comment
@Khez: +1 за пример jsfiddle - person iwasrobbed; 22.09.2011

arrow_upward
5
arrow_downward

Я хотел добавить кнопку воспроизведения/паузы, подобную этой, без использования jquery или froogaloop. Я не знаю почему, но я ненавижу включать библиотеку, когда мне это не нужно. Особенно для таких простых вещей.

Вот что я придумал (я просто публикую это для других людей, которые ищут):

<!DOCTYPE HTML>
<html>
<head>
    <title>Vimeo Test</title>
    <script language="JavaScript">
    var iFram, url;
    function startitup(){
        iFram = document.getElementById('theClip');
        url = iFram.src.split('?')[0];
    }
    function postIt(action, value) {
        var data = { method: action };
        if (value) {
            data.value = value;
        }
        if(url !== undefined){
            iFram.contentWindow.postMessage(JSON.stringify(data), url);
        }
    }
</script>
</head>
<body onload="startitup();">
<iframe id="theClip" src="http://player.vimeo.com/video/27855315?api=1" width="400"     height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>    </iframe>
<p><button onclick="postIt('play');">Play</button> <button     onclick="postIt('pause');">Pause</button></p>
</body>
</html>
person Josh    schedule 06.05.2013

arrow_upward
1
arrow_downward

Вот простой способ приостановить видео Vimeo из внешнего HTML-элемента, который сработал для меня, используя библиотеку froogaloop:

var iframe = $('.video')[0];
var player = $f(iframe);
$('.button').bind('click', function() {
    player.api('pause');
});
person Robert Pessagno    schedule 03.07.2012

arrow_upward
0
arrow_downward

Я немного опоздал на вечеринку, но мне нужно было загрузить froogaloop, jquery и Vimeo API.

не забудьте добавить ?api=1&player_id='frame' в конец ссылки на встроенное видео

Мой код выглядел примерно так после

<iframe id="frame" src='http://player.vimeo.com/video/199114019?api=1&player_id='frame''></iframe>

$(document).ready(function() {
    $('.nameofyourclass').click(function() {
      $f($('#frame')[0]).api('pause');
    });
});

person Tyler Watson    schedule 15.01.2017