观看回放/点播活动

在直播回放状态下或者点播活动中，观众可以通过SDK进入直播间观看回放或点播，补足除直播场景之外视频点播的场景需求。

注意事项

必需登录成功之后才可以进入活动

初始化点播播放器需要判断活动类型是否为回放/点播活动

观看直播步骤

实例化播放器控制器 - VHWatchVodPlayer

构造直播播放器组件 - VHWatchVodPlayerView

初始化房间信息 - VHWatchVodPlayer.initWebinarInfo （只设置一次）

设置播放器回调事件监听 - VHWatchVodPlayerCallback (监听onPlayerViewInitCompleted后进行播放)

开始播放 - VHWatchVodPlayer.startPlay

暂停播放 - VHWatchVodPlayer.pausePlay

恢复播放 - VHWatchVodPlayer.resumePlay

销毁播放器 - VHWatchVodPlayer.destroyPlayer （退出房间必须调用，只设置一次）

核心类

类名	描述
VHWatchVodPlayer	播放器控制核心类
VHWatchVodPlayerView	播放器核心组件
VHWatchVodPlayerCallback	播放器事件回调

关键方法

方法	方法描述
VHWatchVodPlayer.initWebinarInfo	初始化直播间信息
VHWatchVodPlayer.setVodPlayerListener	设置播放器回调事件监听
VHWatchVodPlayer.startPlay	开始播放
VHWatchVodPlayer.stopPlay	停止播放
VHWatchVodPlayer.pausePlay	暂停播放
VHWatchVodPlayer.resumePlay	恢复播放
VHWatchVodPlayer.setSpeed	设置当前播放器播放倍速
VHWatchVodPlayer.seek	设置播放器播放位置
VHWatchVodPlayer.changeDefinition	切换清晰度
VHWatchVodPlayer.setPlayerVolume	设置播放音量
VHWatchVodPlayer.setPlayerScalingMode	设置播放器视频画面填充模式
VHWatchVodPlayer.destroyPlayer	销毁播放器
VHWatchVodPlayer.initCastPlay	初始化投屏能力
VHWatchVodPlayer.startCastingPlay	开始投屏
VHWatchVodPlayer.seekCasting	设置投屏进度
VHWatchVodPlayer.stopCastingPlay	结束投屏
VHWatchVodPlayer.initPipController	初始化画中画
VHWatchVodPlayer.startPiP	开启画中画
VHWatchVodPlayer.updatePipControlStatus	更新画中画播放按键状态
VHWatchVodPlayer.stopPiP	结束画中画
VHWatchVodPlayerCallback	播放器事件回调

实例化播放器控制器

类构造

代码示例


import { VHWatchVodPlayer} from "@vhall/vhall_live";

@Component
export struct VHWatchLivePlayerComponent {
  @State message: string = 'Hello World';
  /**
   * 播放器控制类
   * */
 public vodPlayer?: VHWatchVodPlayer = new VHWatchVodPlayer(this.getUIContext().getHostContext() as Context);
 ......
  }

构造点播播放器组件

组件构造

@Component
export struct VHWatchVodPlayerView {
  /**
   * 组件状态更新回调
   */
  @Require public componentListener?: VHWatchVodPlayerCallback;
  /**
   * 播放器控制类
   * */
  @Require public vodPlayer?:VHWatchVodPlayer;
  /**
   * 控制是否扩展
   */
  @Prop  public is_expand: boolean = false;
  /**
   * @param enable_default_water_mask 是否使用默认水印
   * **/
  @Require enable_default_water_mask:boolean = false;
  /**
   * @param water 水印
   * **/
  @Require water: VHWatermarkConfig | null = null;
}

代码示例

   build() {
    Stack({ alignContent: Alignment.Center }) {
      // 播放器容器
      VHWatchVodPlayerView({
        componentListener: this,
        vodPlayer: this.vodPlayer,
        is_expand: this.is_expand,
        enable_default_water_mask: true,
        water: this.player_config?.water
      })
        .width('100%')
        .height('100%')
        .expandSafeArea(this.is_expand ? this.expandTypes : [], this.is_expand ? this.expandEdges : [])
        .backgroundColor(Color.Black)
        .align(Alignment.Center)
        .zIndex(playerZIndex.indexOf(PLAYER_INDEX))
    
    
     }
  }

初始化直播间信息

接口 API

  public initWebinarInfo(webinarsInfo: VHWebinarData)

接口入参

参数名称	是否必须	示例	备注
webinarsInfo	是	xx	活动信息
代码示例

   aboutToAppear(): void {
    this.vodPlayer?.initWebinarInfo(this.webinars!);
  }

设置播放器回调事件监听

接口 API

 public setLivePlayerListener(listener: VHWatchLivePlayerCallback)

代码示例


@Component
export struct VHWatchVodPlayerComponent {

  public vodPlayer?: VHWatchVodPlayer = new VHWatchVodPlayer(this.getUIContext().getHostContext() as Context);
  @State public webinars: VHWebinarData | null = null;

  aboutToAppear(): void {
  //初始化播放器活动信息
    this.vodPlayer?.initWebinarInfo(this.webinars!);
    //是否支持画中画
    if (this.player_config?.basic?.picture_in_picture == 1) {
      this.vodPlayer?.initPipController(true);
    }
    this.vodPlayer?.setVodPlayerListener(this);
    this.vodPlayer?.setPlayerScalingMode(VHPlayerVideoScalingMode.VH_ASPECT_FILL);
    }
 }

开始播放

接口 API

  public startPlay(def: VHPlayDefinition)

接口入参

参数名称	是否必须	示例	备注
def	是	xx	清晰度

代码示例

  onPlayerViewInitCompleted(){
    this.vodPlayer?.startPlay(this.player_config?.default_definition!);
    this.isPlayError = true;
  }

停止播放

接口 API

  public stopPlay()

代码示例

    this.vodPlayer?.stopPlay();

暂停播放

接口 API

  public pausePlay()

代码示例

//控制暂停和恢复
if(this.is_playing){
  this.vodPlayer?.pausePlay();
  this.vodPlayer?.updatePipControlStatus(VHPipControlPanelStatus.VH_CONTROL_PAUSE);
}else{
  this.vodPlayer?.resumePlay();
  this.vodPlayer?.updatePipControlStatus(VHPipControlPanelStatus.VH_CONTROL_PLAY);
}

恢复播放

接口 API

  public resumePlay()

代码示例

//控制暂停和恢复
if(this.is_playing){
  this.vodPlayer?.pausePlay();
  this.vodPlayer?.updatePipControlStatus(VHPipControlPanelStatus.VH_CONTROL_PAUSE);
}else{
  this.vodPlayer?.resumePlay();
  this.vodPlayer?.updatePipControlStatus(VHPipControlPanelStatus.VH_CONTROL_PLAY);
}

设置当前播放器播放倍速

接口 API

 public setSpeed(speed:VHVodSupportSpeed)

接口入参

参数名称	是否必须	示例	备注
speed	是	xx	VHVodSupportSpeed
代码示例

//控制暂停和恢复
builder: SpeedPopup({
      onItemSelected: (item: popItemValueObj) => {
        if (this.is_start) {
          this.vodPlayer?.setSpeed(item.value as VHVodSupportSpeed)
          this.speedSetting = item.value as VHVodSupportSpeed;
        }
        this.speed = item.text;
        this.isSpeedShow = false;
      }
    })

倍速设置枚举值VHVodSupportSpeed

投屏状态

VHVodSupportSpeed	类型	备注
VH_PLAYER_SPEED_0_75_X	number	表示视频播放正常播速的0.75倍
VH_PLAYER_SPEED_1_00_X	number	表示视频播放正常播速
VH_PLAYER_SPEED_1_25_X	number	表示视频播放正常播速的1.25倍
VH_PLAYER_SPEED_1_75_X	number	表示视频播放正常播速的1.75倍
VH_PLAYER_SPEED_2_00_X	number	表示视频播放正常播速的2.00倍

恢复播放

接口 API

  public resumePlay()

代码示例

//控制暂停和恢复
if(this.is_playing){
  this.vodPlayer?.pausePlay();
  this.vodPlayer?.updatePipControlStatus(VHPipControlPanelStatus.VH_CONTROL_PAUSE);
}else{
  this.vodPlayer?.resumePlay();
  this.vodPlayer?.updatePipControlStatus(VHPipControlPanelStatus.VH_CONTROL_PLAY);
}

设置播放器播放位置

接口 API

 public seek(currentTime:number)

接口入参

参数名称	是否必须	示例	备注
currentTime	是	xx	播放位置 (ms)
代码示例

//控制暂停和恢复
  this.vodPlayer?.seekCasting(this.currentTime);

切换清晰度

接口 API

 public changeDefinition(def: VHPlayDefinition)

参数名称	是否必须	示例	备注
def	是	xx	VHPlayDefinition清晰度

代码示例

//根据选择的清晰度进行播放
builder:definitionsPopup({onItemSelected: (item: popItemValueObj) => {
    if (this.is_start) {
      this.isLoading = true;
      this.vodPlayer?.changeDefinition(item.value as VHPlayDefinition)
      this.isPlayError = true;
    }
    this.playDefinition = item.text;
    this.isDefinition = false;
  }},this.playDefinitionList),

设置播放音量

接口 API

 public setPlayerVolume(vol: number): number

接口参数

参数名称	是否必须	示例	备注
vol	是	xx	范围：0.01 ~ 1.0

代码示例

//根据选择的清晰度进行播放
.onActionUpdate((event: GestureEvent | undefined) => {
  if (event && event.fingerList && event.fingerList[0]) {
    const touchY = event.fingerList[0].localY;
    const deltaY = touchY - touchStartY;
    // 移动距离占播放器高度的比例(deltaY取反是因为值的正负与滑动方向相反)
    const percent = (-deltaY / changeHeight);
    const width = changeWidth as number;
    if (touchStartX <= (width / 2)) {

    } else {
      let v = this.playerVol - (event.offsetY)/3/10;
      let newVol = this.playerVol + percent;
      // 严格限制在0-100范围内
      newVol = Math.max(0, Math.min(100, v));
      this.playerVol = newVol;
      this.isShowVol = true;
      this.vodPlayer?.setPlayerVolume(newVol/100);//设置音量
    }
    touchStartY = touchY;
  }
})

设置播放器视频画面填充模式

接口 API

  public setPlayerScalingMode(mode: VHPlayerVideoScalingMode)

接口参数

参数名称	是否必须	示例	备注
mode	是		VHPlayerVideoScalingMode填充模式

代码示例

//根据选择的清晰度进行播放
aboutToAppear(): void {
    this.vodPlayer?.initWebinarInfo(this.webinars!);
    if(this.playerConfig?.basic?.picture_in_picture == 1){
      this.vodPlayer?.initPipController(true);
    }
    this.vodPlayer?.setLivePlayerListener(this);
    this.vodPlayer?.setPlayerScalingMode(VHPlayerVideoScalingMode.VH_ASPECT_FILL);
    }

视频播放器的缩放模式

VHPlayerVideoScalingMode	类型	备注
VH_FILL	number	将图像拉伸填充
VH_ASPECT_FIT	number	将图像等比例缩放，适配最长边，居中显示，可能会留有黑边
VH_ASPECT_FILL	number	将图像等比例铺满整个屏幕，多余部分裁剪掉

销毁播放器

接口 API

 public destroyPlayer()

代码示例

  aboutToDisappear(): void {
    this.barrageController.pause();
    this.barrageController.clearInScreen();
    this.vodPlayer?.destroyPlayer();
  }

投屏

初始化投屏能力

接口 API

  public initCastPlay(source: VHCastMediaSource)

接口参数

参数名称	是否必须	示例	备注
source	是		VHCastMediaSource 投屏配置

代码示例

aboutToAppear(): void {
    this.vodPlayer?.initWebinarInfo(this.webinars!);
    this.vodPlayer?.setLivePlayerListener(this);
    this.vodPlayer?.setPlayerScalingMode(VHPlayerVideoScalingMode.VH_ASPECT_FILL);
   
    this.source = {
      title:this.webinars?.webinar?.subject!,
      name:'微吼SaaS',
      description:this.webinars?.webinar?.subject!,
      headImage:"https://cnstatic01.e.vhall.com/.....c1651.jpg"
    };
    //初始化投屏后，会创建媒体会话绑定播控服务。如果不使用投屏功能不要进行初始化。
    this.vodPlayer?.initCastPlay(this.source);
  });

开始投屏

接口 API

  public startCastingPlay()

代码示例

使用投播控件自动实现投屏

设置投屏进度

接口 API

  public seekCasting(seekTime: number)

接口参数

参数名称	是否必须	示例	备注
seekTime	是	xx	播放进度，单位ms.

代码示例

 this.vodPlayer?.seekCasting(10001);

结束投屏

接口 API

  public stopCastingPlay()

代码示例

  .onClick(() => {
    this.vodPlayer?.stopCastingPlay();
    this.isCasting = false;
  })

画中画

初始化画中画

接口 API

 public initPipController(autoStart:boolean,navId?:string)

接口参数

参数名称	是否必须	示例	备注
autoStart	是	xx	boolean 退到后台是否自动开启画中画
navId	否	xx	1、UIAbility使用Navigation管理页面，需要设置Navigation控件的id属性，并将该id设置给画中画控制器，确保还原场景下能够从画中画窗口恢复到原页面； 2、UIAbility使用Router管理页面时（画中画场景不推荐该导航方式），无需设置navigationId。注意：该场景下启动画中画后，不要进行页面切换，否则还原场景可能出现异常； 3、UIAbility只有单页面时，无需设置navigationId，还原场景下也能够从画中画窗口恢复到原页面

代码示例

  aboutToAppear(): void {
   //如果活动配置支持了画中画则进行配置
   this.vodPlayer?.initWebinarInfo(this.webinars!);
    if(this.playerConfig?.basic?.picture_in_picture == 1){
      this.vodPlayer?.initPipController(true);
    }
  }

开启画中画

接口 API

 public startPiP()

代码示例

  this.vodPlayer?.startPiP();

更新画中画播放按键状态

接口 API

  public updatePipControlStatus(status: VHPipControlPanelStatus)

接口参数

参数名称	是否必须	示例	备注
status	是	xx	VHPipControlPanelStatus

代码示例

 if(this.is_playing){
    this.vodPlayer?.pausePlay();
     this.vodPlayer?.updatePipControlStatus(VHPipControlPanelStatus.VH_CONTROL_PAUSE);
}else{
   this.vodPlayer?.resumePlay();
   this.vodPlayer?.updatePipControlStatus(VHPipControlPanelStatus.VH_CONTROL_PLAY);
}

结束画中画

接口 API

 public stopPiP()

代码示例

  this.vodPlayer?.stopPiP();

播放器事件回调

接口 API

代码示例

  
  onPlayerViewInitCompleted() {
    this.vodPlayer?.startPlay(this.player_config?.default_definition!);
    this.isPlayError = true;
  }

  /**
   * 播放器播放失败事件
   */
  onPlayerError(error: VHErrorInfo) {
    if (error.code == VHConstants.VH_PLAY_CURRENT_DEF_FAILED) {
      //没有可用的清晰度，重新进行播放。
      this.vodPlayer?.startPlay(this.player_config?.default_definition!);
    } else if (error.code == VHConstants.VH_PLAY_STREAM_FAILED || error.code == VHConstants.VH_NETWORK_ERROR ||
      error.code == VHConstants.VH_CAN_NOT_FIND_HOST) {
      this.vodPlayer?.pausePlay();
      this.is_playing = false;
      this.isPlayError = true;
    }
    this.getUIContext().getPromptAction().showToast({
      message: error.code + error.message,
      duration: 4000,
      showMode: promptAction.ToastShowMode.DEFAULT,
      bottom: 80
    });
  }

  /**
   * 观看状态回调
   * @param player  播放器实例
   * @param state   状态类型 详见 VHPlayerStatus 的定义.
   */
  onStatusDidChange(state: VHPlayerState) {
    if (state == VHPlayerState.VH_PLAYER_PLAYING) {
      this.is_start = true;
      this.is_playing = true;
      this.isLoading = false;
      this.isPlayError = false;
    } else if (state == VHPlayerState.VH_PLAYER_PAUSE || state == VHPlayerState.VH_PLAYER_STOP ||
      state == VHPlayerState.VH_PLAYER_RELEASE) {
      this.is_playing = false;
    }
    if (state == VHPlayerState.VH_PLAYER_PREPARED) {
      this.isLoading = true;
      if (this.isPlayError) {
        //播放失败后重新播放监听VH_PLAYER_PREPARED事件，然后重置下播放进度
        this.vodPlayer?.seek(this.currentTime);
      }
    } else if (state == VHPlayerState.VH_PLAYER_BUFFERING_END) {
      this.isLoading = false;
    }
    this.playerState = state;
  }

  /**
   * 画中画状态
   * @param state: 画中画播放状态
   */
  onPipStatusChange(state: VHPlayerPipState) {

  }

  /**
   * 画中画控制中心播放状态
   * @param state: VHPlayerPipControlPanelStatus
   */
  onPipControlPanelStatusChange(state: VHPipControlPanelStatus) {
    if (state == VHPipControlPanelStatus.VH_CONTROL_PAUSE) {
      this.vodPlayer?.pausePlay();
    } else {
      this.vodPlayer?.resumePlay();
    }
  }

  /**
   * 播放器音量
   * @param volume :当前播放器音量值
   */
  onPlayerVolume(volume: number) {

  }

  /**
   * 当前房间支持的清晰度列表
   * @param definitions   支持的清晰度列表
   */
  onValidDefinitions(definitions: VHPlayDefinition[]) {
    let hasDef: boolean = false;
    this.definitions_list = [];
    this.playDefinitionList = [];
    definitions.forEach((item) => {
      //是否隐藏原画
      if (item == VHPlayDefinition.VH_ORIGIN && this.configList.live_hidden_same == 1) {
        return;
      }
      this.definitions_list.push(item);
      if (this.player_config?.default_definition == item) {
        hasDef = true;
      }
      this.resetPlayDef(item);
    })
    if (!hasDef && this.player_config && definitions.length > 0) {
      definitions.forEach((item) => {
        //如果没有默认清晰度，则重新选择一个清晰度
        if (item != VHPlayDefinition.VH_AUDIO && this.player_config) {
          this.resetPlayDef(item);
          this.player_config.default_definition = item as VHPlayDefinition;
          return;
        }
      })
    }
  }

  /**
   * 视频流播放成功后，回调视频流的宽髙。用户可根据视频流实际宽高，调整播放容器大小。
   * @param width   视频帧宽度
   * @param height  视频帧高度
   */
  onVideoFrameSize(width: number, height: number) {

  }

  /**
   * 投屏设备状体事件回调。
   * @param state. 0 设备已准备好可以播放。1：设备已断开
   */
  onCastPlayDeviceState(state: number) {
    this.isCasting = state == 0 ? true : false;
  }

  /**
   * 已连接的投屏设备。
   * @param state. 0 设备已准备好可以播放。1：设备已断开
   */
  onCastPlayDeviceConnected(device: VHCastPickerDevice) {
    this.castPickDevice = device.deviceName;
  }

  /**
   * 投屏事件回调。
   * @param state:VHCastPlayState
   */
  onCastPlayState(state: VHCastPickerState) {
    if (state == VHCastPickerState.VH_CAST_PICKER_STATE_PLAY) {
      this.is_start = true;
      this.is_playing = true;
    } else if (state == VHCastPickerState.VH_CAST_PICKER_STATE_PAUSE ||
      state == VHCastPickerState.VH_CAST_PICKER_STATE_STOP) {
      this.is_playing = false;
    }
  }

  /**
   * 投屏播放时长。
   * @param duration:number  播放总时长 ，单位ms
   */
  onCastPlayDuration(duration: number) {
    this.totalDuration = duration;
  }

  /**
   * 投屏播放当前位置。
   * @param position:number  播放当前进度 ，单位ms
   */
  onCastPlayPosition(position: number) {
    this.currentTime = position;
  }

  /**
   * 投屏操作失败。
   * @param state:VHCastPlayState。执行相关操作失败。包括开播、暂停、设置进度
   */
  onCastPlayError(state: VHCastPickerState) {
    this.getUIContext().getPromptAction().showToast({
      message: '投屏异常' + state.toString(),
      duration: 4000,
      showMode: promptAction.ToastShowMode.DEFAULT,
      bottom: 80
    });
  }

  /**
   * @description 监听资源播放资源的时长，单位为毫秒（ms），用于刷新进度条长度
   * @param duration  回放时长，单位为毫秒（ms）。
   */
  onVodTotalDuration(duration: number) {
    this.totalDuration = duration;
  }

  /**
   * @description 当前播放时长，单位为毫秒（ms），用于刷新进度条长度
   * @param currentDuration  当前播放时长，单位为毫秒（ms）。
   */
  onVodCurrentDuration(current: number) {
    this.currentTime = current;
    //定时每秒同步播放进度。用于同步显示实时字幕
    if (this.subtitleTimer == 0) {
      this.subtitleTimer = setInterval(() => {
        let msgData: EmitterMsgData;
        msgData = {
          type: MsgType.VOD_SUBTITLE_TIME,
          data: this.currentTime
        } as EmitterMsgData;
        EmitterUtil.send(msgData);
      }, 500)
    }
  }

  /**
   * @description 监听SeekTime，用于刷新进度条长度
   * @param duration  当前时长，单位为毫秒（ms）。
   */
  onVodSeekDuration(duration: number) {

  }

  /**
   * @description 监听倍速切换，表示切换倍速成功。
   * @param speed  当前倍速
   */
  onVodSpeedDone(speed: VHVodSupportSpeed) {

  }

观看回放/点播

观看回放/点播活动#

注意事项#

观看直播步骤#

核心类#

关键方法#

实例化播放器控制器#

构造点播播放器组件#

初始化直播间信息#

设置播放器回调事件监听#

开始播放#

停止播放#

暂停播放#

恢复播放#

设置当前播放器播放倍速#

倍速设置枚举值VHVodSupportSpeed#

恢复播放#

设置播放器播放位置#

切换清晰度#

设置播放音量#

设置播放器视频画面填充模式#

视频播放器的缩放模式#

销毁播放器#

投屏#

初始化投屏能力#

开始投屏#

设置投屏进度#

结束投屏#

画中画#

初始化画中画#

开启画中画#

更新画中画播放按键状态#

结束画中画#

播放器事件回调#

观看回放/点播活动

注意事项

观看直播步骤

核心类

关键方法

实例化播放器控制器

构造点播播放器组件

初始化直播间信息

设置播放器回调事件监听

开始播放

停止播放

暂停播放

恢复播放

设置当前播放器播放倍速

倍速设置枚举值VHVodSupportSpeed

恢复播放

设置播放器播放位置

切换清晰度

设置播放音量

设置播放器视频画面填充模式

视频播放器的缩放模式

销毁播放器

投屏

初始化投屏能力

开始投屏

设置投屏进度

结束投屏

画中画

初始化画中画

开启画中画

更新画中画播放按键状态

结束画中画

播放器事件回调