强制 HTML5 视频自动全屏显示

Question

我有一个网页，其中包含一些嵌入视频，例如

<video controls="controls" class="trumpetVideo" id="trumpetVideo">
<source src="videos/Trumpet_VP8.webm" type="video/webm">
Your browser does not support the video tag.
</video>

网页还包含其他文字和图像。

我的问题是，如何在没有用户交互的情况下使视频播放并进入全屏模式？我知道我可以使用 HTML5 的新全屏 api，但是如果我使用

var trumpet = $("#trumpetVideo");
var trumpet1 = trumpet[0];
trumpet1.mozRequestFullScreen();
trumpet1.play();

javascript/开发人员控制台返回“全屏请求被拒绝，因为未从短期运行的用户生成的事件处理程序中调用 Element.mozRequestFullScreen()。”我怎样才能绕过这个？我不会向公众上传该网站，它只是在一次会议上在平板电脑上进行展示。

我可以使用 HTML、Javascript、JQuery、Phonegap（和插件）

Answer 1

这不可能

不幸的是，由于安全原因，无法系统地进入全屏。

但是，您可以使用 CSS 和 JavaScript 使视频占据整个屏幕：

/*
Use function start(); and exit();
to pause and play the video
*/

var trumpet = document.querySelector("#trumpetVideo");
var styleTag = document.createElement("style");
styleTag.innerHTML = `.fullscreen {
        position:fixed;
        border:none;
        overflow:hidden;
        top:0;
        left:0;
        bottom:0;
        right:0;
        height: 100vh;
        width: 100vw;
        margin:0;
        padding:0;
        }
        .in{
        background-color:black;
        }
        .gone{
            display:none;         
        }`;
document.head.appendChild(styleTag);

function start() {
  trumpet.classList.add("fullscreen");
  trumpet.play();
  document.body.classList.add("in");
  // OPTIONAL:
  document.getElementById("wrapper").classList.add("gone");
}

function exit() {
  trumpet.classList.remove("fullscreen");
  trumpet.pause();
  document.body.classList.remove("in");
  document.getElementById("wrapper").classList.remove("gone");
}

   <video id="trumpetVideo" loop>
      <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
      <source src="https://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
      Your browser does not support HTML5 video.
    </video>
    <!--
    Video from w3schools 
    -->
<div id = "wrapper">
<button onclick = "start();">Start Video!!!</button>
        <button onclick = "stop();">End Video!!! (You can't see this button when it's in fullscreen)</button>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
</div>

工作 JSFiddle