Пауза Vimeo универсального встраивания при скрытии с помощью jQuery - PullRequest
Новая
       32

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

8 голосов
/ 08 апреля 2011

У меня на странице скрыто видео 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);
});

Ответы [ 4 ]

17 голосов
/ 08 апреля 2011

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

JS 

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

Удивительно просто.Вот пример на jsfiddle.net .

5 голосов
/ 06 мая 2013

Я хотел добавить кнопку воспроизведения / паузы, например, без использования 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>
1 голос
/ 03 июля 2012

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

var iframe = $('.video')[0];
var player = $f(iframe);
$('.button').bind('click', function() {
    player.api('pause');
});
0 голосов
/ 15 января 2017

Я немного опоздал на вечеринку, но мне пришлось загрузить 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');
    });
});
...