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

【问题标题】：Making video fullscreen automatically when the device orientation is landscape with javascript当设备方向为横向时使用javascript自动制作视频全屏
【发布时间】：2020-12-05 03:09:33
【问题描述】：

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

这是我的代码：

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>

【问题讨论】：

请让我们知道您是否尝试过任何代码来检查设备并且它是否处于横向模式。
我试过这个代码：window.addEventListener("orientationchange",function() { becomeFullscreen(); }, false );
您需要检查orientationChange处理程序中的window.orientation属性，developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
好的，谢谢，我会看的
感谢它现在的工作！

标签： javascript html video orientation fullscreen

【解决方案1】：

在您的 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 :("); 
}
});

【讨论】：

【解决方案2】：

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

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

【讨论】：