Advanced Usage

Overview

Advanced usage covers the following scenarios:

• Scenario 1: Playback
• Scenario 2: Pausing and Resuming Playback
• Scenario 3: Switching to Another Video
• Scenario 4: Setting Full-Screen Playback
• Scenario 5: Muting
• Scenario 6: Stopping Playback
• Scenario 7: Destroying a Player

For details about the complete code in the preceding scenarios, see Advanced Usage. You can copy the code to the local PC for testing.

Scenario 1: Playback

// Playback configuration
const options = {
  // Playback DOM node ID.
  elementId: 'preview',
  // URL used after downgrade
  downgradeUrl: {
    flvUrl: 'https://xxxx/xx/xx/xx.flv',
    hlsUrl: 'https://xxxx/xx/xx/xx.m3u8'
  },
  // Video display adaptation
  objectFit: 'fill'
}

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

Scenario 2: Pausing and Resuming Playback

To pause the playback, call the pause method by referring to pause. To resume the playback, call the resume method by referring to resume.

// Pause the playback.
const pauseAction = function () {
  playClient.pause()
}

// Resume the playback.
const resumeAction = function () {
  playClient.resume()
}

Scenario 3: Switching to Another Video

To quickly switch to another video during playback, call the switchPlay method to transfer the target video URL. See switchPlay.

// Switch to another video.
const switchAction = function () {
  const url = 'a new url'
  playClient.switchPlay(url)
}

Scenario 4: Setting Full-Screen Playback

You can call the fullScreenToggle method to set full-screen playback. See fullScreenToggle.

// Full screen
const fullScreenAction = function () {
  playClient.fullScreenToggle()
}

Scenario 5: Muting

You can call the muteAudio method to mute or unmute a video. See muteAudio.

// Mute the video.
const muteAction = (() => {
  let mute = false
  return function () {
    mute = !mute
    playClient.muteAudio(mute)
  }
})()

Scenario 6: Stopping Playback

You can call the stopPlay method to stop playback. This method is different from pause. pause means temporarily stopping video playback, and the playback may be resumed after a short period of time. Stream pull continues but there are no image and sound. stopPlay means interrupting the stream. See stopPlay.

// Stop playback.
const stopAction = function () {
  playClient.stopPlay()
}

Scenario 7: Destroying a Player

After the playback task is complete, you can call the destroyClient method to destroy the player. Generally, if you create a player on a page, you can play multiple videos on the page and need to destroy the player when leaving the page. See destroyClient.

// Destroy the player.
const destroyAction = function () {
  playClient.destroyClient()
  playClient = null
}