javascript - YouTube 视频在隐藏和显示其容器 div 时重新启动

Question

我将 YouTube 视频嵌入到我的页面的 div 内，可以使用按钮隐藏和显示(使用 jQuery/css)。当我隐藏并显示然后显示 div 时，视频必须重新加载并从头开始。有没有办法记住视频的进度和播放从同一个位置？或者更好的方法是让视频不必重新加载？

这是 div/you-tube 视频的 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/

Answer 1

我建议将您的对象嵌入转换为较新的 iframe 元素以嵌入 YouTube 视频。使用此 stackoverflow 帖子中的代码: 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":""}', '*');
}

我创建了这个 fiddle 来完成你想要的事情: http://jsfiddle.net/RSDxC/2/