使用javascript在设备方向为横向时自动全屏显示视频

Question

我有一个视频，如果您按下按钮，它就会变成全屏。我需要帮助，使视频在设备处于横向时自动全屏显示。我尝试了很多方法，但没有一个有效。

这是我的代码：

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

function becomeFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) {
    /* IE/Edge */
    elem.msRequestFullscreen();
  }
}

<video id="video" width="600" height="800">
            <source src="videoplaceholder.mp4" />
        </video>

<button id="button" onclick="becomeFullscreen()">Fullscreen</button>

Answer 1

您需要检查orientationChange处理程序内的window.orientation属性。在orientationChange事件的事件处理程序中，检查window.screen.orientation属性。如果是横向，则将视频全屏显示。

https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation

Answer 2

在 JavaScript 中添加以下代码：

window.addEventListener("orientationchange", function(event) {
  var orientation = (window.screen.orientation || {}).type || window.screen.mozOrientation || window.screen.msOrientation;

  if (["landscape-primary","landscape-secondary"].indexOf(orientation) !== -1) {
    becomeFullscreen();
  } else if (orientation === undefined) {
    console.log("The orientation API isn't supported in this browser :("); 
  }
});