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

编程问答 2022-08-16

问题描述

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

这是我的代码：

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>

解决方法

您需要检查directionChange处理程序中的window.orientation属性。在directionChange事件的事件处理程序内，检查window.screen.orientation属性。如果是风景，请全屏播放视频。

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

,

在Javascript中添加以下代码

{{1}}
fullscreenfullscreenhtmljavascriptorientationvideovideo