如何结合现有的全屏模式和视频暂停？ [英] How to combine exisiting full screen mode and video pause?

问题描述

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

I somehow managed to put two options in one button: when clicking, the video starts to play and enters full screen at the same time.

这是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：

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();
}
}

到目前为止事情进展顺利。进入全屏时，底部有一个默认的类似玩家的东西，有一个按钮可以退出全屏。

So far things go smooth. When entering full screen, there's a default player-like thing at the bottom, with a button offering the possibility to exit full screen.

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

What I would like to achieve is to be able to pause the video when clicking that button, but I have no idea how.

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

What I can think of is some kind of a function that detects if we're full screen or not, and if we're not, it would pause/stop (not sure which I prefer yet) the video.

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

This is what came to my mind, but I'm really a newbie in JS and it doesn't work:

 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();
    }
}

我做错了什么？我该如何实现？

What am I doing wrong? How can I make it happen?

推荐答案

使用 fullscreenchange 事件处理程序：

Use fullscreenchange event handler:

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

注意：关注供应商前缀。

Note: care for vendor prefixes.

这篇关于如何结合现有的全屏模式和视频暂停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！