停止播放特定分辨率的嵌入式視頻

我正在一個包含兩個相同vimeo視頻的網站上工作。一個是我想在另一個地方觀看視頻的1000px分辨率的較大屏幕分辨率。所以我把它們中的兩個放在那裏，並用一些CSS控制它們中哪些是可見的。停止播放特定分辨率的嵌入式視頻

但是，視頻需要在頁面加載時自動播放。而display:none; css標籤，它只會隱藏視頻，而不是暫停/禁用視頻。

有沒有一種很好的方法來控制它？目前我正在嘗試使用jQuery和Froogaloops來做到這一點，但尚未能完成它的工作。這是我到目前爲止：

jQuery(document).ready(function($) { 

    var player = $("#82625501"); 
    froogaloop = $f(player[0].id); 
    // Optimalisation: Store the references outside the event handler: 
    var $window = $(window); 

    function checkWidth() { 
     var windowsize = $window.width(); 
     if (windowsize < 1000) { 

      froogaloop.api('pause'); 

     } 
     else { 
      froogaloop.api('play'); 
     } 
    } 
    // Execute on load 
    checkWidth(); 
    // Bind event listener 
    $(window).resize(checkWidth); 
});

這隻適用於調整屏幕，而不是第一次加載。這個怎麼做？或者也許有一個更簡單的方法？提前致謝！

來源

2014-01-07 Trekdrop

你使用什麼類型的球員？它應該有預定義的屬性來啓用自動播放。至於顯示器，當做類似的事情時，我用媒體查詢來隱藏/顯示我想要的不同大小的內容。 – Abernasty

@Abernasty我正在嵌入一個vimeo視頻，所以vimeo播放器？ – Trekdrop

好了，你可能會想要做的就是改變自動播放參數上Vimeo's embed API如所概括的「1」，像這樣：

<iframe src="//player.vimeo.com/video/82527075?autoplay=1" width="500" height="209" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/82527075">The Awareness</a> from <a href="http://vimeo.com/user2354244">Henry</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

凡?autoplay=1追加到src網址是什麼將觸發自動播放，但對於大多數移動設備而言，這不適用於數據消費最佳實踐。

您可以手動添加或從Vimeo獲取嵌入代碼時，只需打開顯示選項菜單並選擇自動播放以自動附加。

至於禁用視頻，至少在我的Firefox測試中，一旦視頻經過折點設置爲display: none;，根據音頻截取判斷它停止播放。

嗯，我想this question有助於解決，如果你想在視頻不可見時加以阻止。

來源

2014-01-07 15:32:48 Abernasty

感謝您的回覆，但實際上您並沒有給我答案。我知道如何播放視頻以及如何隱藏視頻，這不是我的問題。您提供的鏈接可能很有用。 – Trekdrop

停止播放特定分辨率的嵌入式視頻

回答

相關問題