文档首页/ 视频直播 Live/ 低时延客户端SDK参考/ Web SDK/ 最佳实践/ 代码示例/ 进阶用法
更新时间：2024-11-15 GMT+08:00
查看PDF
分享

进阶用法

进阶用法的完整代码实例，如下所示：

<!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>进阶用法</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()">播放</button>
      <button class="op_btn" onclick="pauseAction()">暂停</button>
      <button class="op_btn" onclick="resumeAction()">恢复</button>
      <button class="op_btn" onclick="switchAction()">切换视频</button>
      <button class="op_btn" onclick="stopAction()">停止</button>
      <button class="op_btn" onclick="fullScreenAction()">全屏</button>
      <button class="op_btn" onclick="muteAction()">静音/取消静音</button>
      <button class="op_btn" onclick="destroyAction()">销毁</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()
      }

      // 播放配置
      const options = {
        // 播放dom ID
        elementId: 'preview',

        // 降级地址
        downgradeUrl: {
          flvUrl: 'your flv url',
          hlsUrl: 'your hls url'
        },

        // 画面适配
        objectFit: 'fill'
      }

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

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

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

      // 切换视频
      const switchAction = function () {
        const url = playUrlInput.value
        playClient.switchPlay(url)
      }

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

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

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

      // 销毁
      const destroyAction = function () {
        playClient.stopPlay()
        playClient.destroyClient()
        playClient = null
        isPlaying = false
      }
    </script>
  </body>
</html>
父主题： 代码示例