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

文章讲述了在接入萤石云平台时,遇到并发路数限制导致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了。

如有错误,请指正。

Vue2是一种流行的JavaScript框架,用于构建用户界面。它提供了一种简洁的方式来组织和管理前端代码,并且具有响应式的数据绑定和组件化的开发模式。 Video.js是一个开源的HTML5视频播放器库,它提供了一套强大的API和丰富的功能,可以在网页上嵌入和播放视频。Vue2和Video.js可以很好地结合使用,以实现在Vue应用中嵌入和控制视频播放的功能。 要在Vue2中使用Video.js,首先需要安装Video.js库。可以通过npm或者直接引入CDN来获取Video.js。然后,在Vue组件中引入Video.js,并在需要的地方使用Video.js提供的API来控制视频播放。 以下是一个简单的示例,展示了如何在Vue2中使用Video.js: 1. 安装Video.js: ``` npm install video.js ``` 2.Vue组件中引入Video.js: ```javascript import videojs from 'video.js' import 'video.js/dist/video-js.css' export default { mounted() { // 在组件挂载后初始化Video.js this.player = videojs(this.$refs.videoPlayer) }, beforeDestroy() { // 在组件销毁销毁Video.js实例 if (this.player) { this.player.dispose() } }, methods: { play() { // 播放视频 this.player.play() }, pause() { // 暂停视频 this.player.pause() } } } ``` 3. 在模板中使用Video.js播放器: ```html <template> <div> <video ref="videoPlayer" class="video-js"></video> <button @click="play">播放</button> <button @click="pause">暂停</button> </div> </template> ``` 这只是一个简单的示例,你可以根据Video.js提供的API和文档来实现更多的功能,如设置视频源、控制音量、显示/隐藏控制条等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值