OpenHarmony3.1新特性-surface+videoplayer实现视频播放_0
时间：2023-03-12 07:28:59
科技观察
更多内容请访问：51CTOOpenHarmony技术社区https://ost.51cto.comOpenHarmony最新3.1版本，终于支持surface+videoplayer实现视频播放功能了。一、surface+videoplayer视频播放与传统视频组件的对比大家可能觉得很早就支持一个视频组件就可以实现视频播放了？是的，视频组件可以简单的播放一个视频，你仔细去看看，视频组件支持的API函数太少了，很多自定义的功能无法实现。下面是3.1版本video组件的api：而3.1中新增的一个关键组件是xcomponent，可以设置一个type为surface，我比较关注这个surface。在说Surface之前，先说说videoplayer。3.1版本还增加了视频播放的媒体服务videoplayer。它为我们提供了各种与视频播放服务相关的API。具有视频组件的所有功能，还具有视频首帧发送给显示器并上报事件、监听视频播放宽高变化事件、监听视频缓存更新事件等高级功能，可以帮助我们定制一个非常高级的视频播放器。而videoplayer只是一个视频播放的媒体服务。它不能像视频组件那样直接输出视频显示在显示器上。这时候就需要用到surface了。Surface可以简单理解为用来画画的画布。在hml布局文件中添加一个xcomponent组件，并设置type为surface，就相当于放置了一个canvas。表面可以抽象为程序中的一块内存。在js代码中，xcomponent组件可以通过调用getXComponentSurfaceId()方法来申请这块内存，然后就可以自由绘制了。videoplayer完成视频编解码服务后，可以调用setDisplaySurface这个方法将视频内容输出到之前的surfacememory中，从而实现在window上显示最终视频的功能。下图是基本架构图2、surface+videoplayer视频播放代码实现下面只实现了最基本的视频播放功能。首先是编写hml布局文件，代码如下：200px;border-color:red;border-width:5px;">
然后编写js文件，代码如下：importmediafrom'@ohos.multimedia.importfileIOfrom'@ohos.fileio'letvideoPlayer=undefined;letsurfaceID=undefined;//用于保存Xcomponent接口返回的surfaceIDexportdefault{data:{title:""},onInit(){},//调用Xcomponent接口获取surfaceID保存在surfaceID变量中，接口为默认由XComponent加载，非主动调用asyncLoadXcomponent(){surfaceID=this.$element('Xcomponent').getXComponentSurfaceId();console.info('LoadXcomponentsurfaceIDis'+surfaceID);//用户选择视频设置fd（本地播放）letfdPath='fd://';//path路径的码流可以通过"hdcfilesendD:\xxx\01.mp3/data/accounts/account_0/appdata"命令推送到设备letpath='/data/accounts/account_0/appdata/1.mp4';AwaitfileIO.open(path).then(fdNumber=>{fdPath=fdPath+''+fdNumber;console.info('openfdsucessfdis'+fdPath);},err=>{console.info('打开fdfailederris'+err);});awaitmedia.createVideoPlayer().then((video)=>{if(typeof(video)!='undefined'){videoPlayer=video;console.info('videocreateVideoPlayersuccess');}else{console.info('videocreateVideoPlayerfail');}}).catch((error)=>{console.info(`videocatchCallback,error:${error.message}`);});videoPlayer.url=fdPath;console.info('视频地址成功');//设置surfaceID用于显示视频画面awaitvideoPlayer.setDisplaySurface(surfaceID).then(()=>{console.info('setDisplaySurfacesuccess');}).catch((error)=>{console.info(`视频catchCallback，错误：${error.message}`);});//调用prepare完成播放前的准备awaitvideoPlayer.prepare().then(()=>{console.info('preparesuccess');}).catch((error)=>{console.info(`videocatchCallback,error:${error.message}`);});//调用播放开始播放awaitvideoPlayer.play().then(()=>{console.info('播放成功');}).catch((error)=>{console.info(`videocatchCallback,错误：${error.message}`);});},}想了解更多内容请访问：51CTOOpenHarmony技术社区https://ost.51cto.com
