1、 根据div宽高自适应显示播放
(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>

在这里插入图片描述

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐