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

发布于 1周前 作者 wuwangju 来自 鸿蒙OS

HarmonyOS 鸿蒙Next ArkTS中视频播放Video组件实现竖屏到横屏切换
<markdown _ngcontent-ksp-c147="" class="markdownPreContainer">

在开发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)


      <span class="hljs-title class_">Text</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">title</span>)
        .<span class="hljs-title function_">fontColor</span>(<span class="hljs-title class_">Color</span>.<span class="hljs-property">White</span>)
        .<span class="hljs-title function_">alignSelf</span>(<span class="hljs-title class_">ItemAlign</span>.<span class="hljs-property">Center</span>)
        .<span class="hljs-title function_">margin</span>({ <span class="hljs-attr">bottom</span>: <span class="hljs-number">280</span> })
        .<span class="hljs-title function_">zIndex</span>(<span class="hljs-number">2</span>)
    }
  }.<span class="hljs-title function_">width</span>(<span class="hljs-string">'100%'</span>)
}
.<span class="hljs-title function_">width</span>(<span class="hljs-string">"100%"</span>)
.<span class="hljs-title function_">height</span>(<span class="hljs-string">"100%"</span>)
.<span class="hljs-title function_">onReady</span>(<span class="hljs-function"><span class="hljs-params">ctx</span> =&gt;</span> {
  interface params {
    <span class="hljs-attr">item</span>: <span class="hljs-title class_">VideoItem</span>;
  }
  <span class="hljs-keyword">let</span> par = ctx.<span class="hljs-property">pathInfo</span>.<span class="hljs-property">param</span> <span class="hljs-keyword">as</span> params;
  <span class="hljs-variable language_">this</span>.<span class="hljs-property">videoSrc</span> = par.<span class="hljs-property">item</span>.<span class="hljs-property">srtEngVideo</span>;
  <span class="hljs-variable language_">this</span>.<span class="hljs-property">title</span> = par.<span class="hljs-property">item</span>.<span class="hljs-property">title</span>;
})
.<span class="hljs-title function_">onShown</span>(<span class="hljs-function">() =&gt;</span> {
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">info</span>(<span class="hljs-string">'VideoPlayer onShown'</span>);
})

}
}

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);
  });
}

注意事项

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

结论

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

作者介绍

作者：csdn猫哥

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

团队介绍

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

版权声明

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

</markdown>

更多关于HarmonyOS 鸿蒙Next ArkTS中视频播放Video组件实现竖屏到横屏切换的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next ArkTS中视频播放Video组件实现竖屏到横屏切换的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next ArkTS中，视频播放组件Video实现竖屏到横屏切换，可以通过以下步骤实现：

  1. 配置方向监听：在Page或Component中，通过监听设备的屏幕方向变化事件，如system.window.onOrientationChange，来捕捉屏幕方向的改变。

  2. 调整Video组件样式：根据捕捉到的屏幕方向，动态调整Video组件的宽高比和布局方式。竖屏时，Video组件的宽度可以设置为父容器的宽度，高度自适应；横屏时，宽度和高度可以根据屏幕宽高比进行调整，通常设置为全屏显示。

  3. 强制屏幕方向：如果需要，可以使用system.window.setOrientation方法强制屏幕切换到指定的方向，如横屏或竖屏。但注意，频繁强制改变屏幕方向可能会影响用户体验。

  4. 更新UI：在方向改变后，通过ArkTS的UI更新机制，刷新Video组件的布局和样式，确保视频播放画面正确显示。

示例代码（简化）：

@Entry
@Component
struct VideoPage {
  @State orientation: string = 'portrait';

  onOrientationChange(event: any) {
    this.orientation = event.orientation;
    // 根据orientation调整Video组件的样式
  }

  build() {
    // 根据orientation动态构建Video组件布局
  }
}

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部