HarmonyOS鸿蒙Next中video组件如何支持横版视频全屏播放

HarmonyOS鸿蒙Next中video组件如何支持横版视频全屏播放 video组件如何支持横版视频全屏播放，使用Video组件时，如果视频是横版视频，这时候使用this.controller.requestFullscreen(true)方法时会强行进入横版视频竖版填充，屏幕也不会旋转方向

sinazl 1楼

在点击全屏时调用以下代码（全屏与非全屏可通过onFullscreenChange监听）

目前video没有办法实现，可以尝试使用avplayer，videoSizeChange可以获取到视频的宽高

let context = this as common.UIAbilityContext;
let win = context.windowStage.getMainWindowSync();
// 竖屏  window.Orientation.USER_ROTATION_PORTRAIT
win.setPreferredOrientation(window.Orientation.USER_ROTATION_LANDSCAPE).then((data) => {
    console.log('setWindowOrientation: ' + ' Succeeded. Data: ' + JSON.stringify(data));
}).catch((err: string) => {
    console.log('setWindowOrientation: Failed. Cause: ' + JSON.stringify(err));
});

更多关于HarmonyOS鸿蒙Next中video组件如何支持横版视频全屏播放的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼

在HarmonyOS鸿蒙Next中，video组件支持横版视频全屏播放主要通过VideoController和VideoPlayer实现。首先，确保在布局文件中使用<video>标签定义视频组件，并设置id属性以便后续操作。通过VideoController可以控制视频的播放状态，调用enterFullScreen()方法即可进入全屏模式。全屏模式下，视频会自动旋转为横屏，并占据整个屏幕空间。退出全屏可通过exitFullScreen()方法实现。此外，可以通过监听onFullScreenChange事件来处理全屏状态变化时的逻辑。

eggper 3楼

在HarmonyOS鸿蒙Next中，通过<video>组件播放横版视频并实现全屏功能，可以按照以下步骤进行：

设置video组件：

<video id="myVideo" src="video.mp4" controls="true"></video>

监听全屏事件：在JavaScript中监听fullscreenchange事件，确保视频进入或退出全屏模式时正确处理。

const video = document.getElementById('myVideo');
video.addEventListener('fullscreenchange', function() {
    if (document.fullscreenElement) {
        // 进入全屏
    } else {
        // 退出全屏
    }
});

触发全屏模式：通过调用requestFullscreen()方法，实现视频全屏播放。
```
video.requestFullscreen();
```