自定义分集播放前置拦截器

在某些业务场景下，需要在播放分集之前进行一系列的拦截操作。比如鉴权等
ESPlayerManager提供interceptor应用在此场景。
interceptor是返回Promise的方法。

第1步：自定义interceptor

• 参数：为Object类型，属性自定义，无限制。

点击查看源码

{
   xx: 1,
   xxx: 2,
}

• 返回：为Object类型，属性自定义，无限制。

点击查看源码

{
  xxxx: false/true,
  xxxx:其他自定义信息
}

示例代码： ESPlayerInterceptorProvider.js

点击查看源码

export function interceptor(provideParams) {
  return new Promise(function (resolve, reject) {
    //....
    //1.请求网络
    //....
    //2.请求本地缓存
    //....
    //3.其他操作
    //....
    //mock
    let result = {
      intercept: true,
    }
    //resolve会继续执行后续操作
    resolve(result);

    //reject会打断后续操作
    reject({
       intercept: false,
     });
  });
}

第2步：分集中注册interceptor

• 注册单个拦截器

点击查看源码

import {interceptor} from "@/views/player/ESPlayerInterceptorProvider";

let series = {
    id: 0,
    urls: {
      urlIndex: 0,
      urlList: [{
        url: 'http://qcloudcdn-moss.cp47.ott.cibntv.net/project/tvq/qsj_video/2021/12/07/3800609_9c0bae6b6d5df502ffa28f9396a2316e.mp4',
      }],
    },
    //------------------前置拦截器-------------------
    //1.interceptors    固定属性
    //2.support         固定属性
    //3.provider        固定属性
    //4.providerParams  固定属性
    //----------------------------------------------
    interceptors: {
      support: true,
      provider: interceptor,
      providerParams: {
        id: "xxxx",
        otherParams: {xxx: "xxxx"}
      },
    },
    playerType: 1,//播放器类型:1
}
let playInfo = {
    seriesIndex: 0,
    seriesList: [series]
}
this.$refs.es_player_manager.playVideo(playInfo);

• 注册多个拦截器

点击查看源码

import {interceptor} from "./ESPlayerInterceptorProvider";
import {interceptor2} from "@/components/es-player-manager/ESPlayerInterceptorProvider2";
import {interceptor3} from "@/components/es-player-manager/ESPlayerInterceptorProvider3";

let series = {
    id: 0,
    urls: {
      urlIndex: 0,
      urlList: [{
        url: 'http://qcloudcdn-moss.cp47.ott.cibntv.net/project/tvq/qsj_video/2021/12/07/3800609_9c0bae6b6d5df502ffa28f9396a2316e.mp4',
      }],
    },
    interceptors: [{
      support: true,
      provider: interceptor,
      providerParams: {
        id: "xxxx",
        otherParams: {xxx: "xxxx"}
      },
    },
      {
        support: true,
        provider: interceptor2,
        providerParams: {
          id: "xxxx",
          otherParams: {xxx: "xxxx"}
        },
      },
      {
        support: true,
        provider: interceptor3,
        providerParams: {
          id: "xxxx",
          otherParams: {xxx: "xxxx"}
        },
      }
    ],
    playerType: 1,//播放器类型:1
  }
  let playInfo = {
    seriesIndex: 0,
    seriesList: [series]
  }
  this.$refs.es_player_manager.playVideo(playInfo);

第3步：监听拦截器事件

点击查看源码

...
<es-player-manager
      :init-player-window-type="2"
      :es-player-list="esPlayerList"
      //拦截结果成功
      @onPlayerInterceptSuccess="onPlayerInterceptSuccess"
      //拦截结果失败
      @onPlayerInterceptError="onPlayerInterceptError"
      //
      ref="es_player_manager"/>
      
...
      
methods: {
    ...
    onPlayerInterceptError(value) {
      if (ESLog.isLoggable(ESLog.DEBUG)) {
        ESLog.d(TAG, '-----onPlayerInterceptError------>>>>' + JSON.stringify(value));
      }
    },
    onPlayerInterceptSuccess(value) {
      if (ESLog.isLoggable(ESLog.DEBUG)) {
        ESLog.d(TAG, '-----onPlayerInterceptSuccess------>>>>' + JSON.stringify(value));
      }
    },
    ...