vue video.js销毁后初始化问题

原创已于 2023-10-20 10:45:20 修改 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2023-10-20 10:19:48 首次发布

文章讲述了在接入萤石云平台时，遇到并发路数限制导致9048错误的解决方案。作者提出通过在HTML中动态销毁和重写video元素，结合JavaScript的dispose()方法，以实现在同一页面上控制单个摄像头的连接，确保视频播放的流畅性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景及需求：由于接入的是萤石云平台地址，免费账号达到并发路数上限后出现9048的错误，想到的解决方法就是用户在当前网页最多只连接一个摄像头地址，每打开一个video，就销毁上一个，可重复初始化。

1、首先是html代码：

// 由于存在多个摄像头，v-for遍历，给video的父元素绑定id：'video' + item.id，
// 给video绑定id：'myVideo' + item.id
<div :id="'video' + item.id" class="video">
	<video
    	:id="'myVideo' + item.id"
    	class="video-js"
        style="width: 100%; height: 100%; position: relative"
	 />
</div>

效果如图
在这里插入图片描述

2、js代码
实现逻辑：点击播放初始化并自动播放，在点击时判断是否存在一个已经存在的video元素，如果存在就销毁。由于video.js的dispose()会移除dom，故销毁后再写一个video元素。

// 点击播放
handleCameraVideoShow(cameraInfo, type = 'hls') {
	// 如果存在video，则销毁，并重写
      if (this.cameraInfo && this.cameraInfo.cameraPlayer !== null) {
      	// 销毁video
        this.cameraInfo.cameraPlayer.dispose()

		// 重写被移除的dom
        const myVideoDiv = document.getElementById('video' + this.cameraInfo.id)
        console.log('myVideoDiv:', myVideoDiv)
        myVideoDiv.innerHTML = `<video
          id=${'myVideo' + this.cameraInfo.id}
          class='video-js'
          style='width: 100%; height: 100%; position: relative'>
          </video>`

		// cameraPlayer赋null很重要，我销毁后初始化就卡在这里
        this.cameraInfo.cameraPlayer = null
        this.cameraInfo = undefined
      }

	// 将新的摄像头信息赋给cameraInfo 
      this.cameraInfo = cameraInfo
      if (this.cameraInfo.cameraPlayer === null) {
      // 拼凑出要初始化的元素id
        const eleId = 'myVideo' + this.cameraInfo.id

        // 初始化视频方法
        this.cameraInfo.cameraPlayer = this.$video(eleId, {
          // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          // 自动播放属性,muted:静音播放
          autoplay: 'muted',
          // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: 'auto',
          // 设置视频播放器的显示宽度（以像素为单位）
          width: '800px', // "800px",
          // 设置视频播放器的显示高度（以像素为单位）
          height: '320px',
          notSupportedMessage: '此视频或者直播地址不可用',
          poster: require('@/assets/images/camera.jpg')
        })

		// 将播放地址传给src
        this.cameraInfo.cameraPlayer.src(this.cameraInfo[type])
      }
    }

最后记得在页面销毁时把video也销毁了就ok了。

如有错误，请指正。