视频播放器（缓存播放）

本节我们使用无线调试

% ./hdc tconn 192.168.1.221:34617

接下来开始正文。

创建项目，想要运行项目，就要签名

签名以后我们就可以查看源码啦。

简介

本案例实现了视频边缓存边播放的功能。

效果预览：

使用说明：

1.本案例需要访问一个网络视频直链来实现边缓存边播放的功能，您可以修改VideoPlayerManager.ets中的ORIGIN_URL为想要播放的视频直链。

2.安装应用后打开，应用会一边下载视频数据并保存在本地，一边读取本地缓存返回给播放器进行播放。

缓存播放实现

/**
 * Cache and play video.
 * @param context
 * @returns
 */
async cacheAndPlayVideo(context: common.UIAbilityContext): Promise<void> {
  hilog.info(0x0000, TAG, `cacheAndPlayVideo start`);

  class MyCacheListener implements CacheListener {
    onCacheAvailable(cacheFilePath: string, url: string, percentsAvailable: number): void {
      AppStorage.setOrCreate('currentCachePercent', percentsAvailable);
    }
  }

  GlobalProxyServer?.getInstance()?.getServer()?.registerCacheListener(new MyCacheListener(), ORIGIN_URL);
  let proxyUrl: string | undefined = await GlobalProxyServer?.getInstance()?.getServer()?.getProxyUrl(ORIGIN_URL);
  if (proxyUrl?.startsWith(context.cacheDir)) {
    const file = fs.openSync(proxyUrl, fs.OpenMode.READ_ONLY);
    proxyUrl = `fd://${file.fd}`;
  }
  hilog.info(0x0000, TAG, `proxyUrl ${proxyUrl}`);
  this.avPlayer.url = proxyUrl;
}

初始化

async initPlayer(context: common.UIAbilityContext, surfaceId: string,
  callback: (avPlayer: media.AVPlayer) => void): Promise<void> {
  hilog.info(0x0000, TAG, `initPlayer==initCamera surfaceId== ${surfaceId}`);
  this.surfaceID = surfaceId;
  try {
    this.avPlayer = await media.createAVPlayer();
    await this.setAVPlayerCallback(callback);
    this.cacheAndPlayVideo(context);
  } catch (err) {
    hilog.error(0x0000, TAG, `initPlayer initPlayer err：${JSON.stringify(err)}`);
  }
}

XComponent

可用于EGL/OpenGLES和媒体数据写入，并显示在XComponent组件。

XComponent({
  id: 'xcomponent',
  type: 'surface',
  controller: this.componentController
})
  .height(`${this.xComponentHeight}px`)
  .width(`${this.xComponentWidth}px`)
  .onLoad(() => {
    this.componentController.setXComponentSurfaceRect({
      surfaceWidth: Const.SURFACE_WIDTH,
      surfaceHeight: Const.SURFACE_HEIGHT
    });
    this.surfaceId = this.componentController.getXComponentSurfaceId();
    AvPlayManager.getInstance()
      .initPlayer(getContext(this) as common.UIAbilityContext, this.surfaceId, (avPlayer: media.AVPlayer) => {
        avPlayer.on('timeUpdate', (time: number) => {
          this.currentTime = time;
        });
        this.videoDuration = handleTime(avPlayer.duration);
        this.total = avPlayer.duration;
      })
  })

工程目录

├──entry/src/main/ets
│  ├──common
│  │  └──CommonConstants.ets            // 公共常量类
│  ├──entryability
│  │  └──EntryAbility.ets               // 程序入口类
│  ├──model
│  │  ├──GlobalProxyServer.ets          // 代理服务器
│  │  └──VideoPlayerManager.ets         // 播放器管理类
│  ├──pages                  
│  │  └──Index.ets                      // 首页
│  └──utils
│     └──utils.ets                      // 工具类
└──entry/src/main/resource              // 应用静态资源目录

相关权限

• ohos.permission.INTERNET
• ohos.permission.GET_NETWORK_INFO

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  },
  {
    "name": "ohos.permission.GET_NETWORK_INFO"
  }
]

完毕