Skip to content

自定义地址提供者

在某些业务场景下,没有直接播放地址。需要在播放之前进行预处理获取地址信息。
ESVideoPlayer提供urlProvider应用在此场景。

第1步:自定义urlProvider

  • 参数:为Object类型,属性自定义,无限制。
点击查看源码
js
{
   xx: 1,
   xxx: 2,
}
  • 返回:播放需要的地址信息。
点击查看源码
js
{
  url: 'http://qcloudcdn-moss.cp47.ott.cibntv.net/project/tvq/qsj_video/2021/12/07/3800609_9c0bae6b6d5df502ffa28f9396a2316e.mp4',
  xxx: 0,
}

示例代码: ESVideoPlayerUrlProvider.js

点击查看源码
js
export function urlProvider(provideParams) {
  return new Promise(function (resolve, reject) {
    //-----------------模拟解析参数和自定义操作---------------
    //....
    //自定义解析参数: provideParams
    //1.请求网络
    //....
    //2.请求本地缓存
    //....
    //3.其他操作
    //....

    //-----------------模拟成功---------------
    let url = url: 'http://qcloudcdn-moss.cp47.ott.cibntv.net/project/tvq/qsj_video/2021/12/07/3800609_9c0bae6b6d5df502ffa28f9396a2316e.mp4',
    let result = {
      url: url,
      code: 0,
    }
    resolve(result);

    //-----------------模拟失败---------------
    // reject(-1);
  });
}

第2步:地址合集中注册urlProvider

点击查看源码
js

let url = {
    id: 0,
    //-------------------start---------------------
    //urlProvider: 固定属性
    urlProvider: {
      support: true,//support: 固定属性,用来判断是否启用
      provider: urlProvider,//provider: 固定属性,自定义的地址提供者
      providerParams: {//providerParams: 固定属性
        id: "xxxx",//自定义参数
        otherParams: {xxx: "xxxx"}//自定义参数
      },
    },
    //--------------------end--------------------
}
let urls = {
    urlIndex: 0,
    urlList: [url]
}
this.$refs.es_video_player.playUrls(urls);