鸿蒙Next使用AVPlayer播放视频 原创 精华

import { media } from '@kit.MediaKit';
import { display } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
import { TimeFormatUtil } from '../utils/TimeFormatUtil';
import { AlignRules } from '../utils/AlignRules';

@Entry
@ComponentV2
struct AVPlayerTest{
  private xComponentController: XComponentController = new XComponentController();
  private avPlayer: media.AVPlayer | null = null;
  private surfaceID: string = '';
  private sliderClickValue:number=0  //记录点击滑块时的进度值
  @Local XComponentHeight: number = display.getDefaultDisplaySync().height;
  @Local XComponentWidth: number = display.getDefaultDisplaySync().width;
  @Local isSliderMoving: boolean = false;
  @Local isPlaying: boolean = true;
  @Local currentTime: number = 0;// 视频当前时间
  @Local durationTime: number = 0;  // 视频总时长
  @Local currentStringTime: string = '00:00';
  @Local durationStringTime: string = '00:00';
  //创建AVPlayer
  async initAVPlayer() {
    media.createAVPlayer().then((video: media.AVPlayer) => {
      if (video === undefined) {
        return;
      }
      this.avPlayer = video;
      this.setAVPlayerCallback(this.avPlayer);
      this.avPlayer.url='http://t-cdn.kaiyanapp.com/1751377904927_21de26f9.mp4'
    })
  }
  //avPlayer 回调函数
  setAVPlayerCallback(avPlayer: media.AVPlayer) {
    //监听seek生效的事件
    avPlayer.on('seekDone', (seekDoneTime) => {
      console.info(`setAVPlayerCallback AVPlayer seek succeeded, seek time is ${seekDoneTime}`);
    });
    avPlayer.on('speedDone', (speed) => {
      console.info(`setAVPlayerCallback AVPlayer speedDone, speed is ${speed}`);
    });
    //监听资源播放当前时间，单位为毫秒（ms）
    avPlayer.on('timeUpdate', (time: number) => {
      if (!this.isSliderMoving) {
        this.currentTime =time;
        this.currentStringTime = TimeFormatUtil.formatToHMS(this.currentTime);
      }
    })
    //监听视频播放宽高变化事件
    avPlayer.on('videoSizeChange', (width: number, height: number) => {
      console.info(`setAVPlayerCallback AVPlayer videoSizeChange, width is ${width} height is ${height}  `);
      display.getAllDisplays((err, data) => {
        let screenWidth = data[0].width;
        let screenHeight = data[0].width;
        let videoRatio: number = Number(width) / Number(height);
        let screenRatio = screenWidth / screenHeight;
        if (videoRatio > screenRatio) {
          this.XComponentWidth = this.getUIContext().px2vp(screenWidth);
          this.XComponentHeight = this.getUIContext().px2vp(height * screenWidth / width);
        } else {
          this.XComponentWidth = this.getUIContext().px2vp(width * screenHeight / height);
          this.XComponentHeight = this.getUIContext().px2vp(screenHeight);
        }
      });
    })

    //监听错误事件，该事件仅用于错误提示，不需要用户停止播控动作
    avPlayer.on('error', (err: BusinessError) => {
      console.info(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}.` +
        `----state: ${avPlayer.state}`);
      avPlayer.reset();
    })

    //状态机切换事件回调类型
    avPlayer.on('stateChange', async (state: string) => {
      switch (state) {
        case 'idle': // 成功调用reset接口后触发该状态机上报
          console.info(` setAVPlayerCallback AVPlayer state idle called.`);
          break;
        case 'initialized':// avplayer 设置播放源后触发该状态上报
          console.info(`setAVPlayerCallback AVPlayer state initialized called.`);
          avPlayer.surfaceId = this.surfaceID;
          avPlayer.prepare();
          break;
        case 'prepared':// prepare调用成功后上报该状态机
          console.info(`setAVPlayerCallback AVPlayer state prepared called.`);
          this.durationTime = avPlayer.duration;
          this.currentTime = avPlayer.currentTime;
          this.durationStringTime = TimeFormatUtil.formatToHMS(this.durationTime);
          avPlayer.play();
          break;
        case 'playing':// play成功调用后触发该状态机上报
          console.info(`setAVPlayerCallback AVPlayer state playing called.`);
          this.isPlaying = true;
          break;
        case 'paused':
          console.info(`setAVPlayerCallback AVPlayer state paused called.`);
          this.isPlaying = false;
          break;
        case 'stopped':
          console.info(`setAVPlayerCallback AVPlayer state stopped called.`);
          this.isPlaying = false;
          break;
        case 'completed':// 播放结束后触发该状态机上报
          console.info(`setAVPlayerCallback AVPlayer state completed called.`);
          this.isPlaying = false;
          break;
        case 'released':
          console.info(`setAVPlayerCallback released called.`);
          break;
        case 'error':
          console.error(`setAVPlayerCallback AVPlayer state error called.`);
          this.isPlaying = false;
          avPlayer.reset();
          break;
        default:
          console.info(` setAVPlayerCallback AVPlayer state unknown called.`);
          break;
      }
    })
  }

  build() {
    RelativeContainer(){
      XComponent({
        // 装载视频容器
        id: 'xComponent',
        type: XComponentType.SURFACE,
        controller: this.xComponentController
      })
        .alignRules(AlignRules.centerInParent)
        .onLoad(() => {
          this.surfaceID = this.xComponentController.getXComponentSurfaceId();
          this.initAVPlayer()
        })
        .width(this.XComponentWidth)
        .height(this.XComponentHeight)
      //控制组件
      this.playControl()
      if (!this.isPlaying) {
        Image($r('app.media.ic_paused'))
          .width('56vp')
          .height('56vp')
          .alignRules(AlignRules.centerInParent)
      }
    }
    .backgroundColor(Color.Black)
    .height('100%')
    .width('100%')
    .onClick(()=>{
      if (this.isPlaying) {
        if (this.avPlayer === undefined) {
          console.info(`pauseVideo error! avPlayer undefined! .`);
          return;
        }
        this.avPlayer!.pause();
      }else {
        if (this.avPlayer === undefined) {
          console.info(`playVideo error! avPlayer undefined! .`);
          return;
        }
        if (this.avPlayer!.state === 'prepared' ||this.avPlayer!.state === 'paused' ||
          this.avPlayer!.state === 'completed') {
          this.avPlayer!.play();
        }
      }
    })
  }
  @Builder
  playControl() {
    Column() {
      Row() {
        Text(this.currentStringTime)
          .fontSize('20vp')
          .fontColor(Color.White)
          .margin({ left: '2vp' })
          .width('45%')
          .textAlign(TextAlign.End)
          .zIndex(3)

        Divider()
          .vertical(true)
          .height('14vp')
          .width('2vp')
          .backgroundBlurStyle(BlurStyle.Regular, { colorMode: ThemeColorMode.LIGHT })
          .color(Color.White)
          .opacity(0.5)
          .margin({ left: 8, right: 8 })
          .rotate({
            x: 0,
            y: 0,
            z: 1,
            centerX: '50%',
            centerY: '50%',
            angle: 30
          })

        Text( this.durationStringTime)
          .fontSize('20vp')
          .fontColor(Color.White)
          .margin({ left: '2vp' })
          .width('45%')
          .textAlign(TextAlign.Start)
          .opacity(0.5)
          .zIndex(3)
      }
      .width('100%')
      .opacity(this.isSliderMoving?1:0)
      Row(){
        Text(this.currentStringTime)
          .fontColor(Color.White)
          .textAlign(TextAlign.End)
          .fontWeight(FontWeight.Regular)
          .margin({ left:10})
        Slider({
          value: this.currentTime,
          min: 0,
          max: this.durationTime,
          style: SliderStyle.NONE
        })
          .layoutWeight(1)
          .height(20)
          .blockColor(Color.White)
          .trackColor(Color.Gray)
          .selectedColor('#007DFF')
          .showSteps(false)
          .showTips(false)
          .trackThickness(4)
          .trackBorderRadius(2)
          .zIndex(3)
          .onChange((value: number, mode: SliderChangeMode) => {
            console.info(`Slider onChange value ${value} `);
            if (mode === SliderChangeMode.Begin) {
              this.isSliderMoving = true;
              this.sliderClickValue = value
            }

            if (mode === SliderChangeMode.Moving) {
              this.currentStringTime = TimeFormatUtil.formatToHMS(value)
              this.sliderClickValue = value
            }
            if (mode === SliderChangeMode.End || mode === SliderChangeMode.Click) {  //离开滑块 点击滑动条
              this.avPlayer!.seek( this.sliderClickValue, media.SeekMode.SEEK_NEXT_SYNC);
              this.isSliderMoving = false;
            }
          })
        Text( this.durationStringTime)
          .fontColor(Color.White)
          .fontWeight(FontWeight.Regular)
      }

    }.alignRules(AlignRules.alignParentBottomCenter)
  }
  aboutToDisappear() {
    if (this.avPlayer == null) {
      console.info(`avPlayer has not init aboutToDisappear`);
      return;
    }
    this.avPlayer.release((err) => {
      if (err == null) {
        console.info(`videoRelease release success`);
      } else {
        console.error(`videoRelease release failed, error message is = ${JSON.stringify(err.message)}`);
      }
    });
  }

  onPageHide() {
    this.avPause();
    this.isPlaying = false;
  }

  avPause(): void {
    if (this.avPlayer) {
      try {
        this.avPlayer.pause();
        console.info(` avPause==`);
      } catch (e) {
        console.error(`avPause== ${JSON.stringify(e)}`);
      }
    }
  }
}
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.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.