YouTube視頻在隱藏並顯示其容器分區時重新啓動

我在可以隱藏和顯示一個按鈕（使用jQuery/css）的div內部的我的頁面中嵌入了youtube視頻。當我隱藏並顯示然後顯示div時，視頻必須重新加載並從頭開始。有沒有辦法從同一個位置記住視頻的進度和回放？或者更好的方式是視頻不必重新加載？YouTube視頻在隱藏並顯示其容器分區時重新啓動

下面是DIV /你管視頻的HTML5：

<div id="you-tube-div"> 
     <object width="640" height="390" data="http://www.youtube.com/v/fQ2Lnln2BOk" type="application/x-shockwave-flash"> 
      <param name="src" value="www.youtube.com/v/fQ2Lnln2BOk"/> 
     </object> 
    </div>

編輯：

這裏是一個小jFiddle，顯示什麼，我試圖做的：

http://jsfiddle.net/ntk3B/

來源

2013-08-23 Mike2012

後http://jsfiddle.net –

阿爽，我從來沒有用過jsfiddle之前。很酷！我已經添加了一個鏈接到一個小jfiddle，顯示我正在嘗試做什麼。如果按下視頻上的播放按鈕然後將其隱藏並再次顯示，則視頻將重新啓動（不奇怪），但我想知道是否有某種方式可以記住它在隱藏之前播放的位置。謝謝！ – Mike2012

我建議將您的對象嵌入到嵌入YouTube視頻的較新的iframe元素中。從這個計算器後使用代碼： How to pause a YouTube player when hiding the iframe?

//via: https://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-iframe 
function toggleVideo(state) { 
    // if state == 'hide', hide. Else: show video 
    var div = document.getElementById("you-tube-div"); 
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow; 
    div.style.display = state == 'hide' ? 'none' : ''; 
    func = state == 'hide' ? 'pauseVideo' : 'playVideo'; 
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*'); 
}

我創造了這個琴，你想要做什麼： http://jsfiddle.net/RSDxC/2/

來源

2013-08-23 19:01:35

非常好，這是完美的，謝謝！ – Mike2012

它在Chrome中運行良好，但在Firefox中失敗。只是在jsfiddle中嘗試了這個小提琴，它從頭開始重新播放視頻，而不是暫停位置。謝謝 – Ramesh

您是否需要使用屬性「顯示」來隱藏視頻？如果您使用屬性「可見性」和值「可見」和「隱藏」來控制項目的可見性，那麼視頻將保存它的暫停位置。

Here是有關顯示和可視性性能之間的差異鏈接...

下面是一些需要考慮的其他注意事項：

如果不暫停視頻，和你設置隱藏的可見性，然後視頻和音頻將繼續播放。但是，您可以使用youtube javascript API來控制視頻。
如果您使用可見性，塊元素仍然會影響它們周圍的元素，您將無法看到它們。這就是爲什麼該屬性是簡單的「知名度」

如果你想/需要使用display屬性，這也並不令人意外，那麼你會希望某些信息存儲有關的變量視頻當您選擇隱藏它時（例如，它在播放中），然後再次單擊該按鈕以顯示視頻時使用該值，但是從您停止播放的視頻中的點開始。我不建議瞭解YouTube API足夠的知識......這將使您有能力隨心所欲地操作YouTube視頻。如果您有任何問題並祝您好運，請告知我們！

來源

2013-08-23 18:58:24 rdgd

謝謝，這個也很有用！ – Mike2012

@ Mike2012沒問題！很高興我可以幫助:-) – rdgd

YouTube視頻在隱藏並顯示其容器分區時重新啓動

回答

相關問題