Onclick 全屏并播放视频答案

【问题标题】：Onclick fullscreen and play videoOnclick 全屏并播放视频
【发布时间】：2017-12-05 08:26:34
【问题描述】：

我有一个 .mov 视频，我需要在单击按钮或元素后全屏播放。

全屏功能正常，我现在唯一需要的是全屏播放。所以我需要在单击按钮或元素时触发 2 个事件。 1 是全屏，2 是播放。

我有这段代码可以全屏显示：

<script type="text/javascript">
function goFullscreen(id) {
    var element = document.getElementById(id);
    if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
}

<body>

    <video class="video_player" id="player" width="100%" height="100%" poster="images/placeholder.png">
    <source src="video/video.mov"/>
        Your browser does not support the HTML5 video tag.  Use a better browser!
    </video>
    <button class="toggle-btn" id="togglePlay" onclick="goFullscreen('player'); return false">
        View Fullscreen!
    </button>

</body>

所以点击它会全屏（全屏没有滚动条和工具栏），但现在我需要它在全屏时播放。

【问题讨论】：

标签： video fullscreen

【解决方案1】：

<video id="videoplay" controls="controls" autoplay="autoplay"> 
    <source src=small.mp4 type=video/mp4>
    <source src=small.3gp type=video/3gp>
    <source src=small.webm type=video/webm> 
    <source src=small.ogv type=video/ogg> 
</video>
<script type="text/javascript">
var myVideo = document.getElementById('videoplay');
myVideo.addEventListener('click', function () {
    if (myVideo.paused) {
      if (myVideo.requestFullscreen) {
        myVideo.requestFullscreen();
      }
      else if (myVideo.msRequestFullscreen) {
        myVideo.msRequestFullscreen();
      }
      else if (myVideo.mozRequestFullScreen) {
        myVideo.mozRequestFullScreen();
      }
      else if (myVideo.webkitRequestFullScreen) {
        myVideo.webkitRequestFullScreen();
      }
      myVideo.play();
    }
    else {
      myVideo.pause();
    }
}, false);

【讨论】：

欢迎来到 Stack Overflow！我们感谢您为编写此答案所做的努力，但遗憾的是这不是一个好的答案。请花点时间阅读How do I write a good answer? :)