如何在网页加载时全屏播放视频？答案

【问题标题】：How to play video full screen on web page loading?如何在网页加载时全屏播放视频？
【发布时间】：2017-01-20 07:40:58
【问题描述】：

需要跨平台，我开发了这个网站http://www.thereelthing.com.sg/。您将看到的第一个视图将显示视频。问题是我需要这个视频在不同的浏览器上全屏显示，目前我使用花哨的盒子，视频是从http://vimeo.com/ 加载来显示的。但是我可以使用任何网络播放器从我自己的服务器加载没有限制。

谢谢注意：此视频由 cookie 设置，仅在首次访问网站时显示。

【问题讨论】：

进入全屏视图必须由用户发起。这是一项安全功能...
有什么方法可以通过代码触发它，我试过如果用户在视频上按“f”，它将是全屏的，但是我如何在fancybox加载时触发“f” ?还是有其他方法可以做到这一点？
@Danial - 不！这就是“必须由用户发起”的意思。
@dan - 如果可以绕过此功能，它就不会成为一个安全功能 =)
无论如何你都不想这样做。即使有可能，您网站的访问者也会讨厌您。如果您的视频没有真实内容（例如现在的内容），则尤其如此。谁愿意为了看到你的标志而缓冲这么大的东西？

标签： jquery html video fullscreen

【解决方案1】：

你可以使用一些 CSS，像这样：

#video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    z-index:300;
}

并使用一些 JavaScrip 使其消失：

setTimeout(hideDiv, 9000);
function hideDiv() {                   
    $("#video").fadeOut("slow");
}

【讨论】：

【解决方案2】：

这是可能的，我只是不推荐它。这是非常具有侵略性的。但是，如果您的客户绝对想要它，您总是可以使用HTML5 fullscreen API，越来越多的浏览器正在采用它（Chrome/Firefox/Safari 是一些早期采用者）。你应该查一下。

但重要的是要注意，这不能在加载时加载（出于安全目的），并且必须由用户触发的事件触发，例如“onclick”。我想 onmouseover 也可以触发它（例如，您的鼠标会悬停在您客户的网页上）。

抱歉回复晚了：我刚刚发现了这个帖子。

【讨论】：

谢谢，但实际上他们想要的页面加载：|
@Danial 你不能使用鼠标悬停什么的？喜欢将鼠标悬停在加载条上播放视频吗？
不，实际上，您有一家公司没有任何网络经验：D。但我已经为他们解释过了。我希望他们真的理解它。