如何结合现有的全屏模式和视频暂停？答案

【问题标题】：How to combine exisiting full screen mode and video pause?如何结合现有的全屏模式和视频暂停？
【发布时间】：2014-07-02 18:57:28
【问题描述】：

我设法将两个选项放在一个按钮中：单击时，视频开始播放并同时进入全屏。

这是html：

<video id="video1" class="video-small">
<source src="video/Marinela+Pinguinos-HD.mp4" type="video/mp4" class="video-file">
<source src="video/Marinela_Pinguinos-HD.webm" type="video/webm" class="video-file">
</video>

<button id="play" class="full-play-button" onclick="vidplay(); goFullscreen('video1')">Play fullscreen</button>

JAVASCRIPT：

function vidplay() {
   var video = document.getElementById("video1");
   var button = document.getElementsByClassName("full-play-button");
   if (video.paused) {
      video.play();
      button.textContent = "||";
   } else {
      video.pause();
      button.textContent = ">";
   }
}

function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);

// These function will not exist in the browsers that don't support fullscreen mode yet, 
// so we'll have to check to see if they're available before calling them.

if (element.mozRequestFullScreen) {
  // This is how to go into fullscren mode in Firefox
  // Note the "moz" prefix, which is short for Mozilla.
  element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
  // This is how to go into fullscreen mode in Chrome and Safari
  // Both of those browsers are based on the Webkit project, hence the same prefix.
  element.webkitRequestFullScreen();
}
}

到目前为止，一切都很顺利。进入全屏时，底部有一个默认的类似播放器的东西，有一个按钮提供退出全屏的可能性。

我想要实现的是能够在单击该按钮时暂停视频，但我不知道如何。

我能想到的是某种功能，它可以检测我们是否全屏，如果不是，它会暂停/停止（不确定我更喜欢哪个）视频。

这是我想到的，但我真的是JS的新手，它不起作用：

 function exitPause() {

      var video = document.getElementById("video1");

    if (document.exitFullscreen) {
        video.pause();
    }
    else if (document.mozCancelFullScreen) {
        video.pause();
    }
    else if (document.webkitExitFullscreen) {
        video.pause();
    }
    else if (element.msExitFullscreen) {
        video.pause();
    }
}

我做错了什么？我怎样才能做到这一点？

【问题讨论】：

标签： javascript html video html5-video

【解决方案1】：

使用fullscreenchange 事件处理程序：

video.addEventListener(
  'fullscreenchange',
  function(event) {
    if (!document.fullscreenElement) {
      video.pause();
    }
  },
  false
);

注意：注意供应商前缀。

【讨论】：

只要切换全屏模式，fullscreenchange 事件就会触发。如果没有全屏元素，则document.fullscreenElement 返回null。因此，事件处理程序中的!document.fullscreenElement 在退出全屏模式时执行。检查这个DEMO。
谢谢！除了 s/full/webkitfull/ 之外，我完全使用了这个，现在我的视频在 Android 上的工作方式与在 iOS 上的工作方式相同。非常感谢您没有使用 JQuery 快捷方式。

【解决方案2】：

多亏了 Igor Gilyazov，我才得以走得更远。这就是代码现在的样子：

 function vidplay() {
   var video = document.getElementById("video1");
   var button = document.getElementsByClassName("full-play-button");


   video.addEventListener(
   'webkitfullscreenchange',
    function(event) {

  if (!document.fullscreenElement && video.paused)  {
  video.play();

} 

else {
    video.pause();
    }
},
false
);


}

全屏：

function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);

// These function will not exist in the browsers that don't support fullscreen mode yet, 
// so we'll have to check to see if they're available before calling them.

if (element.mozRequestFullScreen) {
  // This is how to go into fullscren mode in Firefox
  // Note the "moz" prefix, which is short for Mozilla.
  element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
  // This is how to go into fullscreen mode in Chrome and Safari
  // Both of those browsers are based on the Webkit project, hence the same prefix.
  element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}

现在发生的情况是，当我第一次单击该按钮时，它会全屏播放并播放视频。返回小屏幕时会暂停。

这很棒。

不幸的是，它只会每秒钟发生一次（下一次它会一直暂停，无论是满还是小，然后再次正确，然后错误等等）。

我知道我已经接近了，但它还没有完全工作，有什么修改的想法吗？

【讨论】：