进阶用法

总体说明

进阶用法，共包含下述场景：

• 场景一： 播放
• 场景二：暂停与恢复播放
• 场景三：切换视频
• 场景四：全屏播放
• 场景五：静音
• 场景六：停止播放
• 场景七：销毁播放器

以上场景的完整代码详见进阶用法，可自行拷贝至本地运行测试。

场景一： 播放

// 播放配置
const options = {
  // 播放DOM节点ID
  elementId: 'preview',
  // 降级地址
  downgradeUrl: {
    flvUrl: 'https://xxxx/xx/xx/xx.flv',
    hlsUrl: 'https://xxxx/xx/xx/xx.m3u8'
  },
  // 画面适配
  objectFit: 'fill'
}

// 播放
const startPlay = function () {
  playClient.startPlay(url, options)
}

场景二：暂停与恢复播放

播放过程如需暂停，可调用pause方法，详见pause；恢复播放需调用resume方法，详见 resume。

// 暂停
const pauseAction = function () {
  playClient.pause()
}

// 恢复
const resumeAction = function () {
  playClient.resume()
}

场景三：切换视频

播放过程如需快速切换至另一个视频，可以调用switchPlay方法，传入目标视频url，详见switchPlay。

// 切换视频
const switchAction = function () {
  const url = 'a new url'
  playClient.switchPlay(url)
}

场景四：全屏播放

支持调用fullScreenToggle方法，将视频设为全屏播放模式，详见fullScreenToggle。

// 全屏
const fullScreenAction = function () {
  playClient.fullScreenToggle()
}

场景五：静音

提供muteAudio方法，将视频静音或取消静音，详见muteAudio。

// 静音
const muteAction = (() => {
  let mute = false
  return function () {
    mute = !mute
    playClient.muteAudio(mute)
  }
})()

场景六：停止播放

当前视频如果不想播了，就调用stopPlay方法，与pause的区别在于：pause只是暂时停止，不久后可能会继续播放，播放流会继续拉，只是画面和声音不播放出来。而stopPlay是不想看这个视频了，将播放流断掉，详见stopPlay。

// 停止
const stopAction = function () {
  playClient.stopPlay()
}

场景七：销毁播放器

当前整体播放任务结束之后，调用destroyClient方法销毁播放器。一般情况下，你在某个页面创建了播放器，在离开这个页面时就需要销毁这个播放器，期间你可以在此页面进行任意多个视频的播放，详见destroyClient。

// 销毁
const destroyAction = function () {
  playClient.destroyClient()
  playClient = null
}