HarmonyOS ArkTS中视频播放Video组件实现竖屏到横屏切换

在开发HarmonyOS应用时，视频播放是一个常见的需求。ArkTS提供了Video组件来满足这一需求。本文将介绍如何使用ArkTS的Video组件，并实现视频播放时从竖屏切换到横屏的功能。

视频播放组件简介

Video组件是ArkTS中用于播放视频的内置组件，它支持多种功能，包括自动播放、静音、循环播放等。通过Video组件，开发者可以方便地在应用中集成视频播放功能。

实现步骤

1. 导入必要的模块

首先，我们需要导入VideoItem、window和common模块：

import { VideoItem } from "../../common/bean/apiTypes";
import { window } from "@kit.ArkUI";
import { common } from "@kit.AbilityKit";

2. 定义视频播放组件

接下来，我们定义一个VideoPlayer组件，并在组件中使用Video组件来播放视频：

@Component
struct VideoPlayer {@State title: string = ''private controller: VideoController | undefined;@State previewUri: Resource = $r('app.media.play_circle_fill');@State videoSrc: string = 'http://staticvip.iyuba.cn/video/small/202412/1009544_c.mp4' // 使用时请替换为实际视频加载网址aboutToAppear() {// 获取视频播放参数interface params {item: VideoItem;}let ctx = getContext(this) as common.UIAbilityContext;let par = ctx.pathInfo.param as params;this.videoSrc = par.item.srtEngVideo;this.title = par.item.title;}private changeOrientation(isLandscape: boolean) {let context = getContext(this) as common.UIAbilityContext;window.getLastWindow(context).then((lastWindow) => {lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT);});}build() {NavDestination() {Column() {Stack() {Video({src: this.videoSrc,previewUri: this.previewUri,controller: this.controller}).width('100%').muted(false) // 设置是否静音.controls(true) // 设置是否显示默认控制条.autoPlay(true) // 设置是否自动播放.loop(false) // 设置是否循环播放.objectFit(ImageFit.Contain) // 设置视频适配模式.onError(() => {          // 失败事件回调console.info("Video error.");}).onFullscreenChange(event => {if (event.fullscreen) {this.changeOrientation(true);} else {this.changeOrientation(false);}}).zIndex(1)Text(this.title).fontColor(Color.White).alignSelf(ItemAlign.Center).margin({ bottom: 280 }).zIndex(2)}}.width('100%')}.width("100%").height("100%").onReady(ctx => {interface params {item: VideoItem;}let par = ctx.pathInfo.param as params;this.videoSrc = par.item.srtEngVideo;this.title = par.item.title;}).onShown(() => {console.info('VideoPlayer onShown');})}
}

3. 处理全屏事件

在Video组件的onFullscreenChange事件中，我们根据视频是否进入全屏来切换屏幕方向：

.onFullscreenChange(event => {if (event.fullscreen) {this.changeOrientation(true);} else {this.changeOrientation(false);}
})

4. 切换屏幕方向

changeOrientation方法用于设置屏幕的方向：

private changeOrientation(isLandscape: boolean) {let context = getContext(this) as common.UIAbilityContext;window.getLastWindow(context).then((lastWindow) => {lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT);});
}

注意事项

视频源：确保使用的视频源URL是有效的，并且网络可以访问。
权限：确保应用具有必要的权限来请求设备信息和访问网络。

结论

通过本文的介绍，您已经掌握了如何在HarmonyOS ArkTS中使用Video组件，并实现视频播放时从竖屏切换到横屏的功能。这一功能的实现可以提升用户体验，使视频观看更加方便。希望本文对您有所帮助。

作者介绍

作者：csdn猫哥

原文链接：https://blog.csdn.net/yyz_1987/article/details/144553700

团队介绍

坚果派团队由坚果等人创建，团队拥有12个华为HDE带领热爱HarmonyOS/OpenHarmony的开发者，以及若干其他领域的三十余位万粉博主运营。专注于分享HarmonyOS/OpenHarmony、ArkUI-X、元服务、仓颉等相关内容，团队成员聚集在北京、上海、南京、深圳、广州、宁夏等地，目前已开发鸿蒙原生应用和三方库60+，欢迎交流。