jQuery как остановить видео Vimeo при нажатии

вот простой код:http://jsfiddle.net/YAFuW/1/

в основном я пытался использовать так:

<iframe src="http://player.vimeo.com/video/40977539?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<a href="#">STOP</a>

$('a').click(function() {
   alert('stoped');
   froogaloop.api('unload');
});
7
jquery jquery-plugins vimeo

5 ответов

Я не знаю, "хороший" или "правильный" способ сделать это кросс-браузер.
JavaScript API Youtube также терпит неудачу.

но этот метод надежен и работает.
В принципе, он убивает <iframe> и перестраивает его.

$('a').click(function() {
  alert('stoped');
  vimeoWrap = $('#vimeoWrap');
  vimeoWrap.html(vimeoWrap.html());
});

просмотр в JSFiddle

11

Если вам нужно только воспроизвести или приостановить видео, используйте следующее:

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

$('#stop').click(function() {
    alert('stoped');
    player.api('pause');
});


$('#play').click(function(){
    alert('play');
    player.api('play');
})

и разметку:

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

<iframe id="vimeo-player" src="http://player.vimeo.com/video/40977539?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<a id="stop" href="#">STOP</a>
<a id="play" href="#">PLAY</a>

http://jsfiddle.net/zimm/8CV2S/14/

14

вы пропустили получить идентификатор видео vimeo:

var iframe = $('#vimeo-player')[0];
var player = $f(iframe);
player.api('unload');

пример:http://jsfiddle.net/joan_r/dutzh512/

<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<style>
#play,#pause,#stop{
    width:60px;
    margin:5px;
    text-align: center;
    border: solid;
    cursor:pointer;
}
</style>
</head>
<body>
<iframe id="vimeo-player" src="//player.vimeo.com/video/76979871" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div id="play">[PLAY]</div>
<div id="pause">[PAUSE]</div>
<div id="stop">[STOP]</div>
<script>
    $('#play').click(function() {
        var iframe = $('#vimeo-player')[0];
        var player = $f(iframe);
        player.api('play');
    });
    $('#pause').click(function() {
        var iframe = $('#vimeo-player')[0];
        var player = $f(iframe);
        player.api('pause');
    });
    $('#stop').click(function() {
        var iframe = $('#vimeo-player')[0];
        var player = $f(iframe);
        player.api('unload');
    });
</script>
</body>
</html>
1

Если вы используете обновленный код API Vimeo, вы можете сделать это следующим образом:http://jsfiddle.net/deshg/8CV2S/. Вы можете видеть, что кнопка остановки теперь дает вам предупреждение, а затем видео выгружается.

Ура!

0

лучший способ-работать с Vimeo API:

пример:

<script>
    var iframe = $('.vimeo-iframe').get(0);
    var player = new Vimeo.Player(iframe);
    player.pause();
    //player.play();
</script>
0