Advanced Usage

Updated on 2024-11-15 GMT+08:00

View PDF

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

When the startPlay method is used, the configuration needs to be transferred. elementId is a mandatory DOM node ID, which specifies the video rendering node. You are advised to transfer downgradeUrl so that the specified URL can be used for playback to reduce playback failures when the browser does not support WebRTC or the network condition is poor. If you want the playback area to be filled with the video, set objectFit to fill. Three video display modes are supported. See startPlay.

// 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
}

Parent topic: Best Practices

Previous topic: Best Practices

Next topic: Audio Autoplay Blocking

Feedback

Was this page helpful?

Helpful Not helpful

Provide feedback

Thank you very much for your feedback. We will continue working to improve the documentation.

The system is busy. Please try again later.

Which of the following issues have you encountered?

Content is inconsistent with the product UI

Unclear descriptions

Lack of examples or code

Incorrect steps

Can't find what I need

Lack of best practices

Feedback (optional)

0/500

Select at least one type of issue, and enter your comments or suggestions.

Enter a maximum of 500 characters.

Submit Cancel