当前位置：首页 > article >正文

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

article 2024/12/22 17:12:53

在开发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+，欢迎交流。