你能在视频完成时让 youtube 视频退出全屏吗

Posted 2023-05-08

【中文标题】你能在视频完成时让 youtube 视频退出全屏吗

【英文标题】：Can you have a youtube video exit fullscreen on video complete

【发布时间】：2014-03-05 00:46:47

【问题描述】：

对于 youtube 视频，您有一个按钮可以退出 Flash 和 html5 版本的全屏。有没有办法使用 javascript 以编程方式在完整的视频上退出全屏？所以基本上一旦视频结束，我希望它退出全屏模式。

【问题讨论】：

什么库/框架将用于嵌入视频？给我们更多的细节。我建议MediaElement.js

我只是在使用 youtube API。我在 youtube api 文档中没有看到这样做的方法。

我认为在here发布的那一刻是不可能的。

【参考方案1】：

简短的回答是否定的。目前，没有办法以编程方式 100% 安全退出 Youtube 播放器，但有一种解决方法是 100% 安全。

基本上你需要做的是遵循一系列简单的步骤，它可以在所有浏览器中正常工作：

第 1 步：将您的 Youtube 代码放入一个不可见的 DIV 中，假设它被称为“codeholder”。

第 2 步：将可见 DIV 作为不可见 DIV 的支架。这就是代码的去向，假设它被称为“ytPlayer”。

第 3 步：页面加载后，将不可见的 DIV 复制到可见的 DIV 中。例如，可以这样做：

document.getElementById('ytPlayer').innerHTML = document.getElementById('codeholder').innerHTML;

第 4 步：我假设您使用的是 Youtube API，因此，当YouTube.PlayerState.ENDED 事件被触发时（或任何时候），将不可见的 DIV 复制到可见的 DIV 中。这将强制浏览器关闭播放器以关闭全屏并显示原始播放器。

我喜欢在YouTube.PlayerState.ENDED 事件中执行此操作，因为这是关闭播放器的破坏性方式，因此视频在“退出”全屏后将不会继续播放。

但是，Youtube API 允许您“读取”播放位置，并且您可以通过一些简单的编码轻松恢复播放位置。不过会有几分之一秒的停顿。

【讨论】：

这是一个演示，类似但相同的想法：link

Advanced version added，处理全局范围等。

查看这个 *** 帖子。 ***.com/questions/10706070/…

【参考方案2】：

您需要以下内容： document.exitFullscreen()

您可以在此处阅读有关Fullscreen API的更多信息

【讨论】：

这绝对是最简单的方法。谢谢。完美运行。