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

Posted 2023-02-24

【中文标题】YouTube 视频在隐藏和显示其容器 div 时重新启动

【英文标题】：YouTube Video restarts when hiding and showing its container div

【发布时间】：2013-08-26 21:08:58

【问题描述】：

我在我的页面中嵌入了 youtube 视频，该 div 可以隐藏并使用按钮显示（使用 jQuery/css）。当我隐藏并显示然后显示 div 时，视频必须重新加载并从头开始。有没有办法从同一位置记住视频的进度和播放？或者更好的方式是该视频不必重新加载？

这是 div/youtube 视频的 html5：

    <div id="you-tube-div">
       <object   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/

【问题讨论】：

发帖jsfiddle.net

啊酷，我以前从未使用过 jsfiddle。很酷！我添加了一个指向一个小 jfiddle 的链接，它显示了我正在尝试做的事情。如果您按下视频上的播放按钮，然后将其隐藏，然后再次显示，视频将重新启动（不足为奇），但我想知道是否有一种方法可以记住它在隐藏之前从哪里播放。谢谢！

【参考方案1】：

我建议您将嵌入的对象转换为较新的 iframe 元素以嵌入 youtube 视频。使用此 *** 帖子中的代码： How to pause a YouTube player when hiding the iframe?

//via: https://***.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/

【讨论】：

它在 chrome 中运行良好，但在 Firefox 中失败。刚刚在 jsfiddle 中尝试了这个小提琴，它从头开始而不是暂停位置重新启动视频。谢谢

【参考方案2】：

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

Here是一个关于显示和可见性属性区别的链接...

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

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

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

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

【讨论】：

谢谢，这个也很有用！

没问题@Mike2012 ！很高兴我能帮忙:-)