HarmonyOS Next 开发中，如何实现视频的全屏播放？

Question

HarmonyOS Next 开发中，如何实现视频的全屏播放？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。【来自灵芸小骏老师直播间】

Answer 1

在 HarmonyOS Next 中实现视频全屏播放可以参考 HarmonyOS 的方法。如在 Index.ets 文件中，可以设置相关状态变量和组件来实现列表视频全屏播放，示例代码如下：

import { myVideoSourceDate, VideoSource } from './myVideoSourceDate';
import { VideoComponent } from './VideoComponent';

@Entry
@Component
struct XCAvplayer {
 private data: myVideoSourceDate = new myVideoSourceDate([]);
 @State isLayoutFullScreen : boolean = false;
 @State fangDaIndex : number = -1;

 aboutToAppear(): void {
  let list: VideoSource[] = [
   new VideoSource("文案1", "video1.mp4"),
   new VideoSource("文案2", "video2.mp4"),
   new VideoSource("文案3", "video3.mp4"),
   new VideoSource("文案4", "video4.mp4")
  ];
  console.log("myAppliction is Appear")
  this.data = new myVideoSourceDate(list);
 }

 build() {
  Scroll() {
   Column() {
    List() {
     LazyForEach(this.data, (item: VideoSource,index : number) => {
      ListItem() {
       VideoComponent({item : item, isLayoutFullScreen : this.isLayoutFullScreen, index : index, fangDaIndex : this.fangDaIndex})
       .visibility(this.isLayoutFullScreen && this.fangDaIndex==index)
      }
     })
    }
   }
  }
 }
}

对于 Web 组件中的视频全屏播放，可以参考以下示例：

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct ShortWebPage {
 controller: webview.WebviewController = new webview.WebviewController()
 CONSTANT_HEIGHT = 100;
 @State marginTop: number = this.CONSTANT_HEIGHT;
 @State isVisible:boolean= true;

 build() {
    Column() {
      Text('Stack').width('100%').height(this.CONSTANT_HEIGHT).backgroundColor('#e1dede').visibility(this.isVisible?Visibility.Visible:Visibility.None)
      Web(
       {
        src: "www.huawei.com",
        controller: this.controller
       }
      )
     .onFullScreenEnter((event) => {
       console.log("onFullScreenEnter...")
       this.isVisible = false;
      })
     .onFullScreenExit(() => {
       console.log("onFullScreenExit...")
       this.isVisible = true;
      })
     .width('100%')
     .height("100%")
     .zIndex(10)
     .zoomAccess(true)
    }.width('100%').height
 }
}

对于 video 组件如果想实现横屏全屏播放，是需要调用系统的 setPreferredOrientation，可以结合 video 组件的 onFullscreenChange 事件实现。