Vimeo API - 已暫停的視頻無法再播放

我正在有兩個嵌入的Vimeo視頻的網站上工作。播放第二個視頻時，如果第一個播放，則第一個將暫停。這工作很好。但是，一旦第一個視頻暫停，它將不會再播放。任何想法，非常感謝！Vimeo API - 已暫停的視頻無法再播放

var vimeo = { 
    videos: [], 
    currentVideo: null, 
    init: function (element, i) { 
     var videoData = { 
      'title': $(element).html(), 
      'id': 'video-' + i, 
      'url': $(element).attr('href'), 
      'width': $(element).data('width'), 
      'height': $(element).data('height') 
     }; 
     $.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent(videoData.url) + '&api=1&player_id='+ videoData.id +'&width='+ videoData.width +'&height='+ videoData.height +'&callback=?', function(data){ 
     $(element).html(data.html); 
     $(element).find('iframe').load(function(){ 
       player = this; 
       $(player).attr('id', videoData.id); 
       $f(player) 
       .addEvent('ready', function(player_id){ 
        vimeo.videos.push($f(player_id)); 
       }) 
       .addEvent('play', function(player_id){ 
        if (vimeo.currentVideo != null) vimeo.currentVideo.api('pause'); 
        vimeo.currentVideo = $f(player_id); 
       }); 
      }); 
     }); 
    } 
} 

$(document).ready(function() { 
    $('a.vimeo').each(function(i) { 
     vimeo.init(this, i); 
    }); 
});

來源

2012-10-11 Jamie H.

嘗試此，而不是「玩」事件：

.addEvent('play', function(player_id){ 

         for (var i = 0; i < vimeo.videos.length; i++) { 
          // console.log(vimeo.videos[i].element.id + '=' + $f(player_id) + '?'); 
          if (vimeo.videos[i].element.id != $f(player_id).element.id) { 
           vimeo.videos[i].api('pause'); 
           // console.log('paused ' + vimeo.videos[i].element.id); 
          } 

         } 

        });

您最初的腳本實際上工作得很好對我來說，只要你候補兩者之間videos-但問題是，作爲一旦您嘗試暫停並播放相同的視頻，它就會被卡住，因爲您的變量「currentVideo」保存了之前播放的視頻，即使它是您正在查看並暫停的第一個視頻，然後會立即再次暫停。

我的方法可能有點「蠻力」，暫停所有其他實例，但它似乎對我來說工作正常，並且不應導致明顯的開銷，如果您不顯示超過少數視頻時間。相反，您可能會嘗試使用「currentVideo」變量，該變量不僅在非NULL時發生變化，而且不等於player_id引用的視頻播放器。

此外，它可能有助於你提到你正在使用Froogaloop API，不得不在那裏進行一些調查！

下面是完整的網頁，爲我工作：

<html> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> 

    <script type="text/javascript"> 
     var vimeo = { 
     videos: [], 
     currentVideo: null, 
     init: function (element, i) { 
      var videoData = { 
       'title': $(element).html(), 
       'id': 'video-' + i, 
       'url': $(element).attr('href'), 
       'width': $(element).data('width'), 
       'height': $(element).data('height') 
      }; 
      $.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent(videoData.url) + '&api=1&player_id='+ videoData.id +'&width='+ videoData.width +'&height='+ videoData.height +'&callback=?', function(data){ 
      $(element).html(data.html); 
      $(element).find('iframe').load(function(){ 
        player = this; 
        $(player).attr('id', videoData.id); 
        $f(player) 
        .addEvent('ready', function(player_id){ 
         vimeo.videos.push($f(player_id)); 
        }) 
        .addEvent('play', function(player_id){ 

         for (var i = 0; i < vimeo.videos.length; i++) { 
          // console.log(vimeo.videos[i].element.id + '=' + $f(player_id) + '?'); 
          if (vimeo.videos[i].element.id != $f(player_id).element.id) { 
           vimeo.videos[i].api('pause'); 
           // console.log('paused ' + vimeo.videos[i].element.id); 
          } 

         } 

        }); 
       }); 
      }); 
     } 
    } 

    $(document).ready(function() { 
     $('a.vimeo').each(function(i) { 
      vimeo.init(this, i); 
     }); 
    }); 
    </script> 
</head> 
<body> 
<a class="vimeo" href="http://vimeo.com/48312847">A video</a> 
<a class="vimeo" href="http://vimeo.com/41219986">Another video</a> 
</body> 
</html>

來源

2012-10-11 15:36:41

真棒！感謝所有幫助@ J-griffiths！ –

Vimeo API - 已暫停的視頻無法再播放

回答

相關問題