Пауза на универсалното вграждане на 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 връща вимео плейъра. използвах клас, защото има няколко видеоклипа. трябва ли да добавя селектор като :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
@Khez Чувам те. Опитвам усилено. Ето целия код: minimalpluscreative.com/newclients/danielgomes - person technopeasant; 08.04.2011
comment
Не сте включили правилния froogaloop.js minimalpluscreative.com/newclients/danielgomes/ скриптове/ - person Khez; 08.04.2011
comment
@Khez. Дори не искам да говоря за това. Ти си герой. - 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 libray:

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 и API на Vimeo също.

не забравяйте да добавите ?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