鸿蒙HarmonyOS实战开发：媒体开发＞利用AVPlayer播放视频(ArkTS) ...

 鸿蒙NEXT开发实战往期必看文章：
一分钟了解”纯血版！鸿蒙HarmonyOS Next应用开发！
“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！（从零基础入门到精通）
HarmonyOS NEXT应用开发案例实践总联合（连续更新......）
HarmonyOS NEXT应用开发性能优化实践总结（连续更新......）

---

当前提供两种视频播放开发的方案：

• AVPlayer：功能较完善的音视频播放ArkTS/JS API，集成了流媒体和当地资源解析，媒体资源解封装，视频解码和渲染功能，适用于对媒体资源进行端到端播放的场景，可直接播放mp4、mkv等格式的视频文件。
  
• Video组件：封装了视频播放的基础本领，需要设置数据源以及基础信息即可播放视频，但相对扩展本领较弱。Video组件由ArkUI提供本领，相关引导请参考UI开发文档-Video组件。
  

本开发引导将介绍怎样利用AVPlayer开发视频播放功能，以完整地播放一个视频作为示例，实现端到端播放原始媒体资源。
播放的全流程包罗：创建AVPlayer，设置播放资源和窗口，设置播放参数（音量/倍速/缩放模式），播放控制（播放/停息/跳转/停止），重置，烧毁资源。在进行应用开发的过程中，开发者可以通过AVPlayer的state属性主动获取当前状态或利用on('stateChange')方法监听状态变化。如果应用在视频播放器处于错误状态时执行操作，系统可能会抛出非常或天生其他未界说的活动。
图1 播放状态变化表示图

状态的详细阐明请参考AVPlayerState。当播放处于prepared / playing / paused / completed状态时，播放引擎处于工作状态，这需要占用系统较多的运行内存。当客户端暂时不利用播放器时，调用reset()或release()接纳内存资源，做好资源利用。
开发建议

当前引导仅介绍怎样实现媒体资源播放，在应用开发过程中可能会涉及后台播放、播放辩论等情况，请根据现实需要参考以下阐明。

• 如果要实现后台播放或熄屏播放，需要接入AVSession（媒体会话）和申请长时任务，避免播放被系统强制中断。
  
• 应用在播放过程中，若播放的媒体数据涉及音频，根据系统音频管理计谋（参考处置惩罚音频核心事件），可能会被其他应用打断，建议应用主动监听音频打断事件，根据其内容提示，做出相应的处置惩罚，避免出现应用状态与预期效果不一致的问题。
  
• 面对装备同时毗连多个音频输出装备的情况，应用可以通过on('audioOutputDeviceChangeWithInfo')监听音频输出装备的变化，从而做出相应处置惩罚。
  
• 如果需要访问在线媒体资源，需要申请 ohos.permission.INTERNET 权限。
  

开发步调及注意事项

详细的API阐明请参考AVPlayer API参考。

• 调用createAVPlayer()创建AVPlayer实例，初始化进入idle状态。
  
• 设置业务需要的监听事件，搭配全流程场景利用。支持的监听事件包括：
     事件范例阐明stateChange须要事件，监听播放器的state属性改变。error须要事件，监听播放器的错误信息。durationUpdate用于进度条，监听进度条长度，刷新资源时长。timeUpdate用于进度条，监听进度条当前位置，刷新当前时间。seekDone 相应API调用，监听seek()请求完成情况。
  当利用seek()跳转到指定播放位置后，如果seek操作成功，将上报该事件。
  speedDone 相应API调用，监听setSpeed()请求完成情况。
  当利用setSpeed()设置播放倍速后，如果setSpeed操作成功，将上报该事件。
  volumeChange 相应API调用，监听setVolume()请求完成情况。
  当利用setVolume()调治播放音量后，如果setVolume操作成功，将上报该事件。
  bitrateDone 相应API调用，用于HLS协议流，监听setBitrate()请求完成情况。
  当利用setBitrate()指定播放比特率后，如果setBitrate操作成功，将上报该事件。
  availableBitrates用于HLS协议流，监听HLS资源的可选bitrates，用于setBitrate()。bufferingUpdate用于网络播放，监听网络播放缓冲信息。startRenderFrame 用于视频播放，监听视频播放首帧渲染时间。
  当AVPlayer首次起播进入playing状态后，等到首帧视频画面被渲染到显示画面时，将上报该事件。应用通常可以利用此事件上报，进行视频封面移除，告竣封面与视频画面的顺利衔接。
  videoSizeChange用于视频播放，监听视频播放的宽高信息，可用于调解窗口大小、比例。audioInterrupt 监听音频核心切换信息，搭配属性audioInterruptMode利用。
  如果当前装备存在多个媒体正在播放，音频核心被切换（即播放其他媒体如通话等）时将上报该事件，应用可以及时处置惩罚。
  
  
• 设置资源：设置属性url，AVPlayer进入initialized状态。
  阐明
  下面代码示例中的url仅作表示利用，开发者需根据现实情况，确认资源有用性并设置：
  
  
  
  • 如果利用当地资源播放，必须确认资源文件可用，并利用应用沙箱路径访问对应资源，参考获取应用文件路径。应用沙箱的介绍及怎样向应用沙箱推送文件，请参考文件管理。
    
  • 如果利用网络播放路径，需声明权限：ohos.permission.INTERNET。
    
  • 如果利用ResourceManager.getRawFd打开HAP资源文件形貌符，利用方法可参考ResourceManager API参考。
    
  • 需要利用支持的播放格式与协议。
    
  
  
• 设置窗口：获取并设置属性SurfaceID，用于设置显示画面。
  应用需要从XComponent组件获取surfaceID，获取方式请参考XComponent。
  
• 准备播放：调用prepare()，AVPlayer进入prepared状态，此时可以获取duration，设置缩放模式、音量等。
  
• 视频播控：播放play()，停息pause()，跳转seek()，停止stop() 等操作。
  
• （可选）更换资源：调用reset()重置资源，AVPlayer重新进入idle状态，答应更换资源url。
  
• 退出播放：调用release()烧毁实例，AVPlayer进入released状态，退出播放。
  

完整示例

1. import { media } from '@kit.MediaKit';
2. import { fileIo as fs } from '@kit.CoreFileKit';
3. import { common } from '@kit.AbilityKit';
4. import { BusinessError } from '@kit.BasicServicesKit';
6. export class AVPlayerDemo {
7.   private count: number = 0;
8.   private surfaceID: string = ''; // surfaceID用于播放画面显示，具体的值需要通过Xcomponent接口获取，相关文档链接见上面Xcomponent创建方法
9.   private isSeek: boolean = true; // 用于区分模式是否支持seek操作
10.   private fileSize: number = -1;
11.   private fd: number = 0;
13.   constructor(surfaceID: string) {
14.     this.surfaceID = surfaceID;
15.   }
17.   // 注册avplayer回调函数
18.   setAVPlayerCallback(avPlayer: media.AVPlayer) {
19.     // startRenderFrame首帧渲染回调函数
20.     avPlayer.on('startRenderFrame', () => {
21.       console.info(`AVPlayer start render frame`);
22.     })
23.     // seek操作结果回调函数
24.     avPlayer.on('seekDone', (seekDoneTime: number) => {
25.       console.info(`AVPlayer seek succeeded, seek time is ${seekDoneTime}`);
26.     })
27.     // error回调监听函数,当avPlayer在操作过程中出现错误时调用reset接口触发重置流程
28.     avPlayer.on('error', (err: BusinessError) => {
29.       console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
30.       avPlayer.reset(); // 调用reset重置资源，触发idle状态
31.     })
32.     // 状态机变化回调函数
33.     avPlayer.on('stateChange', async (state: string, reason: media.StateChangeReason) => {
34.       switch (state) {
35.         case 'idle': // 成功调用reset接口后触发该状态机上报
36.           console.info('AVPlayer state idle called.');
37.           avPlayer.release(); // 调用release接口销毁实例对象
38.           break;
39.         case 'initialized': // avplayer 设置播放源后触发该状态上报
40.           console.info('AVPlayer state initialized called.');
41.           avPlayer.surfaceId = this.surfaceID; // 设置显示画面，当播放的资源为纯音频时无需设置
42.           avPlayer.prepare();
43.           break;
44.         case 'prepared': // prepare调用成功后上报该状态机
45.           console.info('AVPlayer state prepared called.');
46.           avPlayer.play(); // 调用播放接口开始播放
47.           break;
48.         case 'playing': // play成功调用后触发该状态机上报
49.           console.info('AVPlayer state playing called.');
50.           if (this.count !== 0) {
51.             if (this.isSeek) {
52.               console.info('AVPlayer start to seek.');
53.               avPlayer.seek(avPlayer.duration); //seek到视频末尾
54.             } else {
55.               // 当播放模式不支持seek操作时继续播放到结尾
56.               console.info('AVPlayer wait to play end.');
57.             }
58.           } else {
59.             avPlayer.pause(); // 调用暂停接口暂停播放
60.           }
61.           this.count++;
62.           break;
63.         case 'paused': // pause成功调用后触发该状态机上报
64.           console.info('AVPlayer state paused called.');
65.           avPlayer.play(); // 再次播放接口开始播放
66.           break;
67.         case 'completed': // 播放结束后触发该状态机上报
68.           console.info('AVPlayer state completed called.');
69.           avPlayer.stop(); //调用播放结束接口
70.           break;
71.         case 'stopped': // stop接口成功调用后触发该状态机上报
72.           console.info('AVPlayer state stopped called.');
73.           avPlayer.reset(); // 调用reset接口初始化avplayer状态
74.           break;
75.         case 'released':
76.           console.info('AVPlayer state released called.');
77.           break;
78.         default:
79.           console.info('AVPlayer state unknown called.');
80.           break;
81.       }
82.     })
83.   }
85.   // 以下demo为使用fs文件系统打开沙箱地址获取媒体文件地址并通过url属性进行播放示例
86.   async avPlayerUrlDemo() {
87.     // 创建avPlayer实例对象
88.     let avPlayer: media.AVPlayer = await media.createAVPlayer();
89.     // 创建状态机变化回调函数
90.     this.setAVPlayerCallback(avPlayer);
91.     let fdPath = 'fd://';
92.     let context = getContext(this) as common.UIAbilityContext;
93.     // 通过UIAbilityContext获取沙箱地址filesDir，以Stage模型为例
94.     let pathDir = context.filesDir;
95.     let path = pathDir + '/H264_AAC.mp4';
96.     // 打开相应的资源文件地址获取fd，并为url赋值触发initialized状态机上报
97.     let file = await fs.open(path);
98.     fdPath = fdPath + '' + file.fd;
99.     this.isSeek = true; // 支持seek操作
100.     avPlayer.url = fdPath;
101.   }
103.   // 以下demo为使用资源管理接口获取打包在HAP内的媒体资源文件并通过fdSrc属性进行播放示例
104.   async avPlayerFdSrcDemo() {
105.     // 创建avPlayer实例对象
106.     let avPlayer: media.AVPlayer = await media.createAVPlayer();
107.     // 创建状态机变化回调函数
108.     this.setAVPlayerCallback(avPlayer);
109.     // 通过UIAbilityContext的resourceManager成员的getRawFd接口获取媒体资源播放地址
110.     // 返回类型为{fd,offset,length},fd为HAP包fd地址，offset为媒体资源偏移量，length为播放长度
111.     let context = getContext(this) as common.UIAbilityContext;
112.     let fileDescriptor = await context.resourceManager.getRawFd('H264_AAC.mp4');
113.     let avFileDescriptor: media.AVFileDescriptor =
114.       { fd: fileDescriptor.fd, offset: fileDescriptor.offset, length: fileDescriptor.length };
115.     this.isSeek = true; // 支持seek操作
116.     // 为fdSrc赋值触发initialized状态机上报
117.     avPlayer.fdSrc = avFileDescriptor;
118.   }
120.   // 以下demo为使用fs文件系统打开沙箱地址获取媒体文件地址并通过dataSrc属性进行播放(seek模式)示例
121.   async avPlayerDataSrcSeekDemo() {
122.     // 创建avPlayer实例对象
123.     let avPlayer: media.AVPlayer = await media.createAVPlayer();
124.     // 创建状态机变化回调函数
125.     this.setAVPlayerCallback(avPlayer);
126.     // dataSrc播放模式的的播放源地址，当播放为Seek模式时fileSize为播放文件的具体大小，下面会对fileSize赋值
127.     let src: media.AVDataSrcDescriptor = {
128.       fileSize: -1,
129.       callback: (buf: ArrayBuffer, length: number, pos: number | undefined) => {
130.         let num = 0;
131.         if (buf == undefined || length == undefined || pos == undefined) {
132.           return -1;
133.         }
134.         num = fs.readSync(this.fd, buf, { offset: pos, length: length });
135.         if (num > 0 && (this.fileSize >= pos)) {
136.           return num;
137.         }
138.         return -1;
139.       }
140.     }
141.     let context = getContext(this) as common.UIAbilityContext;
142.     // 通过UIAbilityContext获取沙箱地址filesDir，以Stage模型为例
143.     let pathDir = context.filesDir;
144.     let path = pathDir + '/H264_AAC.mp4';
145.     await fs.open(path).then((file: fs.File) => {
146.       this.fd = file.fd;
147.     })
148.     // 获取播放文件的大小
149.     this.fileSize = fs.statSync(path).size;
150.     src.fileSize = this.fileSize;
151.     this.isSeek = true; // 支持seek操作
152.     avPlayer.dataSrc = src;
153.   }
155.   // 以下demo为使用fs文件系统打开沙箱地址获取媒体文件地址并通过dataSrc属性进行播放(No seek模式)示例
156.   async avPlayerDataSrcNoSeekDemo() {
157.     // 创建avPlayer实例对象
158.     let avPlayer: media.AVPlayer = await media.createAVPlayer();
159.     // 创建状态机变化回调函数
160.     this.setAVPlayerCallback(avPlayer);
161.     let context = getContext(this) as common.UIAbilityContext;
162.     let src: media.AVDataSrcDescriptor = {
163.       fileSize: -1,
164.       callback: (buf: ArrayBuffer, length: number) => {
165.         let num = 0;
166.         if (buf == undefined || length == undefined) {
167.           return -1;
168.         }
169.         num = fs.readSync(this.fd, buf);
170.         if (num > 0) {
171.           return num;
172.         }
173.         return -1;
174.       }
175.     }
176.     // 通过UIAbilityContext获取沙箱地址filesDir，以Stage模型为例
177.     let pathDir = context.filesDir;
178.     let path = pathDir + '/H264_AAC.mp4';
179.     await fs.open(path).then((file: fs.File) => {
180.       this.fd = file.fd;
181.     })
182.     this.isSeek = false; // 不支持seek操作
183.     avPlayer.dataSrc = src;
184.   }
186.   // 以下demo为通过url设置网络地址来实现播放直播码流的demo
187.   async avPlayerLiveDemo() {
188.     // 创建avPlayer实例对象
189.     let avPlayer: media.AVPlayer = await media.createAVPlayer();
190.     // 创建状态机变化回调函数
191.     this.setAVPlayerCallback(avPlayer);
192.     this.isSeek = false; // 不支持seek操作
193.     avPlayer.url = 'http://xxx.xxx.xxx.xxx:xx/xx/index.m3u8'; // 播放hls网络直播码流
194.   }
196.   // 以下demo为通过setMediaSource设置自定义头域及媒体播放优选参数实现初始播放参数设置
197.   async preDownloadDemo() {
198.     // 创建avPlayer实例对象
199.     let avPlayer: media.AVPlayer = await media.createAVPlayer();
200.     let mediaSource : media.MediaSource = media.createMediaSourceWithUrl("http://xxx",  {"User-Agent" : "User-Agent-Value"});
201.     let playbackStrategy : media.PlaybackStrategy = {preferredWidth: 1, preferredHeight: 2, preferredBufferDuration: 3, preferredHdr: false};
202.     // 设置媒体来源和播放策略
203.     avPlayer.setMediaSource(mediaSource, playbackStrategy);
204.   }
206.   // 以下demo为通过selectTrack设置音频轨道，通过deselectTrack取消上次设置的音频轨道并恢复到视频默认音频轨道。
207.   async multiTrackDemo() {
208.     // 创建avPlayer实例对象
209.     let avPlayer: media.AVPlayer = await media.createAVPlayer();
210.     let audioTrackIndex: Object = 0;
211.     avPlayer.getTrackDescription((error: BusinessError, arrList: Array<media.MediaDescription>) => {
212.       if (arrList != null) {
213.         for (let i = 0; i < arrList.length; i++) {
214.           if (i != 0) {
215.             // 获取音频轨道列表
216.             audioTrackIndex = arrList[i][media.MediaDescriptionKey.MD_KEY_TRACK_INDEX];
217.           }
218.         }
219.       } else {
220.         console.error(`audio getTrackDescription fail, error:${error}`);
221.       }
222.     });
223.     // 选择其中一个音频轨道
224.     avPlayer.selectTrack(parseInt(audioTrackIndex.toString()));
225.     // 取消选择上次选中的音频轨道，并恢复到默认音频轨道。
226.     avPlayer.deselectTrack(parseInt(audioTrackIndex.toString()));
227.   }
228. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。