QuickTV仓库

MediaSource 拦截器

ESMediaSource拦截器是ESPlayerManager调用ESMediaSource之前执行的钩子函数。

拦截器中，可以对ESMediaSource中所有的数据进行操作。

应用场景一：

播放ESMediaSource之前需要根据业务逻辑切换播放地址的域名。

const mediaSource: ESMediaSource = {
  uri: '/data_center/videos/SHORT/DEFAULT/2023/09/07/a2d3da6d-469e-4f99-a2d0-c001741003f8.mp4',
  interceptors: [interceptor]
}

可以通过拦截器执行业务逻辑，拼接播放地址，赋值给ESMediaSource中的uri。

MediaSource 全局拦截器

ESMediaSource全局拦截器可以在整个应用中所有播放视频的位置对ESMediaSource执行钩子函数操作。

第一步、声明全局拦截器

实现ESIPlayerInterceptor接口。

  • id需确保整个应用唯一性。
  • type需明确指定为ESPlayerInterceptorType.ES_PLAYER_INTERCEPTOR_TYPE_MEDIA_SOURCE
  • intercept方法的参数params中params[0]即ESMediaSource。 在次方法中进行业务逻辑，需要返回promise。 如果业务逻辑认为拦截成功则需返回Promise.resolve(ESPlayerInterceptResult)此时ESPlayerInterceptResult中的result字段会全部赋值到 ESMediaSource播放继续进行。 如果业务逻辑认为拦截失败则返回Promise.reject()播放返回错误，终止进行。
  • release方法中有需回收资源
export function createESPlayerMediaSourceGlobalInterceptor(): ESIPlayerInterceptor {

  function intercept(...params: Array<any>): Promise<ESPlayerInterceptResult> {
    //1.转换成 ESMediaSource
    const mediaSource = params[0] as ESMediaSource
    //2.模拟操作：给 ESMediaSource 添加数据
    mediaSource.metadata = '全局拦截器添加的附加信息'
    //3.如果返回 Promise.resolve(result)  播放继续
    // 则会把 ESPlayerInterceptResult中的 result 字段全部赋值到 ESMediaSource
    // 如果返回 PPromise.reject('模拟失败') 播放终止，返回错误
    //
    const result: ESPlayerInterceptResult = {
      result: {
        uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/07/a2d3da6d-469e-4f99-a2d0-c001741003f8.mp4',
        desc: '拦截器添加的新的字段'
      }
    }
    return Promise.resolve(result)
    // return Promise.reject('模拟失败')
  }

  function release(): void {
    //
  }

  return {
    id: 'ESPlayerMediaSourceGlobalInterceptor',
    type: ESPlayerInterceptorType.ES_PLAYER_INTERCEPTOR_TYPE_MEDIA_SOURCE,
    intercept,
    release
  }
}

第二步、注册全局拦截器 

//1.创建全局拦截器
const globalInterceptor = createESPlayerMediaSourceGlobalInterceptor()
//2.注册全局拦截器
const globalInterceptorManager = useESPlayerInterceptorManager()
globalInterceptorManager.addInterceptor(globalInterceptor)

MediaSource 局部拦截器

ESMediaSource局部拦截器可以在此次播放中对ESMediaSource执行钩子函数操作。

第一步、声明局部拦截器

实现ESIPlayerInterceptor接口。

  • id需确保整个应用唯一性。
  • type需明确指定为ESPlayerInterceptorType.ES_PLAYER_INTERCEPTOR_TYPE_MEDIA_SOURCE
  • intercept方法的参数params中params[0]即ESMediaSource。 在次方法中进行业务逻辑，需要返回promise。 如果业务逻辑认为拦截成功则需返回Promise.resolve(ESPlayerInterceptResult)此时ESPlayerInterceptResult中的result字段会全部赋值到 ESMediaSource播放继续进行。 如果业务逻辑认为拦截失败则返回Promise.reject()播放返回错误，终止进行。
  • release方法中有需回收资源
import {
  ESPlayerInterceptorType
} from "@extscreen/es3-player";
import type {
  ESIPlayerInterceptor, ESMediaSource,
  ESPlayerInterceptResult
} from "@extscreen/es3-player";

export function createESPlayerMediaSourceGlobalInterceptor(): ESIPlayerInterceptor {

  function intercept(...params: Array<any>): Promise<ESPlayerInterceptResult> {
    const mediaSource = params[0] as ESMediaSource
    mediaSource.metadata = '全局拦截器添加的附加信息'
    const result: ESPlayerInterceptResult = {
      result: {
        uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/07/a2d3da6d-469e-4f99-a2d0-c001741003f8.mp4',
        desc: '拦截器添加的新的字段'
      }
    }
    return Promise.resolve(result)
  }

  function release(): void {
    //
  }

  return {
    id: 'ESPlayerMediaSourceGlobalInterceptor',
    type: ESPlayerInterceptorType.ES_PLAYER_INTERCEPTOR_TYPE_MEDIA_SOURCE,
    intercept,
    release
  }
}

第二步、注册局部拦截器 

//1.创建局部拦截器
const interceptor = createESPlayerMediaSourceInterceptor()
//2.注册局部拦截器
const mediaSource: ESMediaSource = {
  interceptors: [interceptor],
  uri: null
}
const mediaSourceList: ESMediaSourceList = {
  index: 0,
  list: [mediaSource],
}
const mediaItem: ESMediaItem = {
  mediaSourceList,
}
const playList: ESMediaItemList = {
  index: 0,
  list: [mediaItem],
}
playerManager.value?.initialize()

Source

Docs