实现视频横屏功能

在 JavaScript 中实现视频横屏功能通常需要借助浏览器的全屏 API。下面是实现视频横屏的一般步骤：

1、获取视频元素：首先，通过 JavaScript 获取到视频元素，可以使用 document.getElementById 或其他选择器方法获取到视频元素的引用。

2、请求全屏：使用视频元素的 requestFullscreen 方法请求全屏显示视频。这将触发浏览器的全屏模式。

const video = document.getElementById('videoElement');
video.requestFullscreen();

3、横屏方向：在进入全屏模式后，您可以使用屏幕旋转 API 来设置屏幕方向为横屏。这可以通过 screen.orientation 对象上的方法来实现。

screen.orientation.lock('landscape');

请注意，屏幕旋转 API 可能不是所有浏览器都支持，特别是在移动设备上。

完整的代码示例如下：

const video = document.getElementById('videoElement');


// 请求全屏
video.requestFullscreen();


// 设置横屏方向
screen.orientation.lock('landscape');

请注意，由于浏览器的安全策略，全屏和屏幕旋转功能可能需要在用户交互事件（例如点击按钮）中触发，而不是在页面加载时自动执行。这是为了防止滥用和未经用户许可的全屏操作。

此外，不同浏览器和设备可能对全屏和屏幕旋转的支持有所不同，因此在实际应用中，您可能需要进行兼容性测试和处理。

全屏 API

全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。

全屏 API 在 Document 和 Element 接口中增加了一些方法，可用于允许打开关闭全屏模式。

Document 中的方法：Document.exitFullscreen()

用于请求从全屏模式切换到窗口模式，会返回一个 Promise，会在全屏模式完全关闭的时候被置为 resolved 状态。

Element 中的方法：Element.requestFullscreen()

请求浏览器（user agent）将特定元素（甚至延伸到它的后代元素）置为全屏模式，隐去屏幕上的浏览器所有 UI 元素，以及其他应用。返回一个 Promise，并会在全屏模式被激活的时候变成 resolved 状态。

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
}

事件处理程序

Fullscreen API 定义了两个事件，可用于检测全屏模式的打开和关闭，以及在全屏和窗口模式之间切换过程中发生的错误。Document 和 Element 接口提供了这些事件的事件处理函数。

Document 上的事件处理程序

1、Document.onfullscreenchange

fullscreenchange 事件的处理程序，当进入全屏或退出全屏时，事件将被发送到Document上。此处理程序仅在整个文档全屏模式更改时有效。

2、Document.onfullscreenerror

fullscreenerror 事件的处理程序，当进入全屏或退出全屏出错时，事件将被发送到 Document 上，仅对整个文档的全屏模式更改出错时候有效。

Element 上的事件处理程序

1、Element.onfullscreenchange

当全屏事件发生时，该事件会被发送到该元素，表明该元素进入或退出全屏模式

2、Element.onfullscreenerror

fullscreenerror 事件的处理程序，当指定的 Element 改变全屏模式时候出现错误，该事件将被发送到指定的 Element 上。