Advanced Usage

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

View PDF

Complete sample code of advanced usage:

<!DOCTYPE html>
<html>
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>Advanced usage</title>
    <style>
      html, body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
      .preview_player {
        width: 1280px;
        height: 720px;
        margin: 20px auto;
        border: 1px solid #ddd;
        position: relative;
      }
      .tools {
        width: 1280px;
        margin: 20px auto;
        display: flex;
        flex-wrap: wrap;
      }
      .play_btn {
        color: #fff;
        border: 1px solid rgb(2, 16, 201);
        background: rgba(2, 16, 201, 0.8);
        border-radius: 2px;
        cursor: pointer;
        margin-left: 10px;
      }
      .op_btn {
        margin-left: 10px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="preview" class="preview_player"></div>
    <div class="tools">
      <input id="playUrl"></input>
      <button class="play_btn" onclick="playAction()">Play</button>
      <button class="op_btn" onclick="pauseAction()">Pause</button>
      <button class="op_btn" onclick="resumeAction()">Resume</button>
      <button class="op_btn" onclick="switchAction()">Switch video</button>
      <button class="op_btn" onclick="stopAction()">Stop</button>
      <button class="op_btn" onclick="fullScreenAction()">Full screen</button>
      <button class="op_btn" onclick="muteAction()">Mute/Unmute</button>
      <button class="op_btn" onclick="destroyAction()">Destroy</button>
    </div>
    <script type="text/javascript" src="./sdk/HWLLSPlayer.js"></script>
    <script type="text/javascript">
      const playUrlInput = document.getElementById('playUrl')
      playUrlInput.value = 'your webrtc url'

      let playClient = HWLLSPlayer.createClient()
      let isPlaying = false

      const playAction = function () {
        startPlay()
      }

      // Playback configuration
      const options = {
        // Playback DOM ID
        elementId: 'preview',

        // URL used after downgrade
        downgradeUrl: {
          flvUrl: 'your flv url',
          hlsUrl: 'your hls url'
        },

        // Video display adaptation
        objectFit: 'fill'
      }

        // Playback
      const startPlay = function () {
        if (!isPlaying) {
          isPlaying = true
          const url = playUrlInput.value
          playClient.startPlay(url, options)
        }
      }

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

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

      // Switch to another video.
      const switchAction = function () {
        const url = playUrlInput.value
        playClient.switchPlay(url)
      }

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

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

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

      // Destroy the player.
      const destroyAction = function () {
        playClient.stopPlay()
        playClient.destroyClient()
        playClient = null
        isPlaying = false
      }
    </script>
  </body>
</html>

Parent topic: Sample Code

Previous topic: Sample Code

Next topic: Listening on Autoplay Errors