0

我在 div 的页面中嵌入了 youtube 视频,可以隐藏并使用按钮显示(使用 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/

4

2 回答 2

1

您是否需要使用“显示”属性隐藏视频?如果您使用属性“可见性”,并且值“可见”和“隐藏”来控制项目的可见性,那么视频将保持它的暂停位置。

是有关显示和可见性属性之间差异的链接...

以下是一些需要考虑的额外事项:

  • 如果您不暂停视频,并将可见性设置为隐藏,则视频和音频将继续播放。但是,您可以使用youtube javascript API来控制视频。

  • 如果你使用可见性,块元素仍然会影响它们周围的元素,你只是看不到它们。这就是为什么该属性只是“可见性”

如果您确实想要/需要使用 display 属性,这不足为奇,那么当您选择隐藏它时,您将希望将有关视频的某些信息存储在一个变量中(例如它在播放中的点),然后当您再次单击按钮以显示视频时使用该值,但从您离开的视频点开始。我不建议您充分了解 youtube API……这将使您能够随心所欲地操纵 youtube 视频。如果您有任何问题,请告诉我,祝您好运!

于 2013-08-23T18:58:24.310 回答
1

我建议将您的对象嵌入转换为较新的 iframe 元素以嵌入 youtube 视频。使用此 stackoverflow 帖子中的代码: 隐藏 iframe 时如何暂停 YouTube 播放器?

//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-23T19:01:35.093 回答