关于前端:免费视频直播点播H5播放器SkeyeWebPlayer如何自适应div宽高播放视频

36次阅读

共计 835 个字符，预计需要花费 3 分钟才能阅读完成。

(1)、通过设置播放器容器的款式，来使播放器宽高自适应

<style>
    .web-media-player {
      position: relative;
      width: 500px !important;
      height: 300px !important;
    }
</style>

<section class="container">
    <!-- 播放器容器 -->
    <div class="web-media-player" id="SkeyeWebPlayer"></div>
    <div class="play-url">
      <input type="text" id="url" value="rtsp://192.168.0.111:5540/00000000031316423888/0">
      <button class="btn" onclick="play()"> 播放 </button>
    </div>
</section>

<script type="application/javascript">
    let player = null
    initPlayer()
    
    // 初始化播放器
    function initPlayer() {
      // new WebMediaPlayer（url,domId,callback,options）player = new WebMediaPlayer(
        '',
        `SkeyeWebPlayer`,
        callbackFunc,
        {
          cbUserPtr: this,
          decodeType: 'auto',
          openAudio: 0,
          BigPlay: false,
          Height: 0 // 设置为 0
        });
    }
    
    // 播放
    function play() {let url = document.getElementById('url').value
      player.play(url, 1, 0)
    }
    
    // 回调
    function callbackFunc(cbType, cbParams) {console.log(cbType, cbParams)
    }
</script>

正文完