HarmonyOS 使用XComponent和AvPlayer播放视频出现有声音无画面问题

参考代码：

Row() {
  XComponent({ id: 'xcomponent', type: XComponentType.SURFACE, controller: this.xcomponentController })
    .onLoad(() => {
      this.surfaceID = this.xcomponentController.getXComponentSurfaceId()
      Logger.info(TAG, "surfaceId=" + this.surfaceID);
      this.xComponentContext = this.xcomponentController.getXComponentContext() as Record<string, () => void>
      let surfaceRect: SurfaceRect = { offsetX: 0, offsetY: 0, surfaceWidth: 500, surfaceHeight: 500 }
      this.xcomponentController.setXComponentSurfaceRect(surfaceRect)
      this.rect = this.xcomponentController.getXComponentSurfaceRect()
    }).width('100%')
    .height(260)
}
.width("95%").backgroundColor("#12638bc1").border({ width: 1, color: Color.Pink })
.justifyContent(FlexAlign.Center)
@Component
export struct VideoControls {
  private context = getContext(this) as common.UIAbilityContext
  @Consume('previewObject') item: fileItem
  @Link avPlayer: media.AVPlayer | undefined;
  @Consume  surfaceID: string;
  // 视频播放倍速
  @Consume currentProgressRate: number
  // SR开关
  @Consume srSwitch: boolean
  // 是否横屏播放
  @StorageLink(AppConfig.isLandscape) isLandscape: boolean = AppStorage.get(AppConfig.isLandscape) || false
  @State count: number = 0;
  @State durationTime: number = 0;

  build() {
    Flex({
      justifyContent: FlexAlign.SpaceBetween,
      alignItems: ItemAlign.Center,
    }) {
      // 播放按钮
      Image(this.item.play ? $r('app.media.icon_pause_white') : $r('app.media.icon_play'))
        .width(px2vp(54))
        .height(px2vp(54))
        .objectFit(ImageFit.Contain)
        .onClick(() => {
          this.iconOnclick();
        })

      // 进度条
      Text(this.item.currentStringTime)
        .fontSize(px2fp(40))
        .fontColor('#BFBFBF')
      Slider({
        value: this.count,
        min: 0,
        max: this.durationTime,
        step: 1,
        style: SliderStyle.OutSet
      })
        .blockColor('#ffffff')
        .width('46.7%')
        .trackColor(Color.Gray)
        .selectedColor('#ffffff')
        .showSteps(true)
        .showTips(true)
        .trackThickness(4)
        .onChange((value: number) => {
          this.sliderOnchange(value);
        })
      Text(this.durationTime.toString())
        .fontSize(px2fp(40))
        .fontColor('#BFBFBF')

      if (!this.isLandscape) {
        Image($r('app.media.icon_fullscreen'))
          .width(px2vp(100))
          .height(px2vp(100))
          .objectFit(ImageFit.Contain)
          .onClick(() => {
            this.isLandscape = true
          })
      }
    }
    .height(px2vp(107.5))
    .padding({
      left: px2vp(13.4),
      right: px2vp(13.4),
    })
  }

  /**
   * 初始化 AvPlayer
   */
  private initAvPlayer(surfaceId: string) {
    Logger.info(TAG, `x compoent surface id=${this.surfaceID}`)
    media.createAVPlayer().then((player) => {
      this.avPlayer = player;
      this.setAVPlayerCallback(this.avPlayer)
      const origin_path: Resource = this.item.path as Resource;
      let video_path: string = ""
      if (origin_path.params != undefined) {
        video_path = origin_path.params[0] as string;
      }
      Logger.info(TAG, `video_path: ${video_path}`)
      this.context.resourceManager.getRawFd(video_path)
        .then((file) => {
          let avFileDescriptor: media.AVFileDescriptor =
            { fd: file.fd, offset: file.offset, length: file.length };
          if (this.avPlayer != undefined) {
            this.avPlayer.fdSrc = avFileDescriptor;
            this.avPlayer.surfaceId = surfaceId;
          }
        })
    });
  }

  private setAVPlayerCallback(avPlayer: media.AVPlayer) {
    avPlayer.on('stateChange', async (state: string, reason: media.StateChangeReason) => {
      switch (state) {
        case 'initialized': // avplayer 设置播放源后触发该状态上报
          avPlayer.prepare();
          break;
        case 'prepared': // prepare调用成功后上报该状态机
          Logger.info(TAG, 'AVPlayer state prepared called.');
          this.count = 0;
          this.durationTime = avPlayer.duration;
          avPlayer.play(); // 调用播放接口开始播放
          break;
        case "playing":
          this.item.play = true;
          this.count += 1 ;
          break;
        case 'completed':
          this.item.play = false;
          break;
        case 'paused':
          this.item.play = false;
          break;
      }
    })
  }

  iconOnclick() {
    if (this.avPlayer == undefined) {
      this.initAvPlayer(this.surfaceID)
    } else {
      if (this.item.play === true) {
        this.item.controller?.pause()
        this.avPlayer?.pause();
        this.item.play = false;
        return;
      } else {
        this.item.controller?.start();
        this.avPlayer?.play((err) => {
          if (err == null) {
            Logger.info(TAG, ' play success');
          } else {
            console.error(TAG, `video pause error:${err.message}`)
          }
        })
        this.item.play = true;
      }
    }
  }

  sliderOnchange(value: number) {
    this.item.currentTime = Number.parseInt(value.toString());
    if (this.avPlayer != undefined) {
      this.avPlayer.seek(value, media.SeekMode.SEEK_NEXT_SYNC);
    }
    this.item.controller?.setCurrentTime(Number.parseInt(value.toString()), SeekMode.Accurate);
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.