javascript 当设备方向为横向时自动制作视频全屏

Question

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

这是我的代码：

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 = (screen.orientation || {}).type || screen.mozOrientation || 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 :("); 
}
});

javascript 当设备方向为横向时自动制作视频全屏

Making video fullscreen automatically when the device orientation is landscape with javascript

html

javascript

video

fullscreen

orientation