VUE项目中接入萤石开放平台--直播模式

caitlin
3,535 阅读3分钟

前言

最近遇到一个需求是在一个VUE项目中接入直播模式的监控视频，使用的插件就是萤石开放平台的插件。本以为随随便便就可以搞定的需求，中间却遇到了不少坑。

1. 引入euikit.js文件

根据萤石平台的说明文档，首先要下载相关js文件并引入。

在vue项目引入外部js文件，首先采用的办法是直接在所需页面使用import引入。

打开euikit.js文件，发现该js文件中是一个自执行的匿名函数，返回一个EZUIKit对象，因此使用import引入该文件，可以直接使用EZUIKit对象。

import '../../../libs/ezuikit.js'
export default {
  // ...
  methods:{
    initPlayer(){
        const player = new EZUIKit.EZUIPlayer('视频容器ID') // 直接使用EZUIKit 不会报错
    }
  }
},

这种引入方法虽然可以正常使用，但是可读性不强，并且最后在编译时eslint会提示EZUIKit未被定义。

为了增强代码的可读性，在euikit.js文件的最后添加一行代码，把EZUIKit导出：

export default EZUIKit;

在需要引入的页面代码为：

import EZUIKit from '../../../libs/ezuikit.js'

这样就可以放心的使用EZUIKit了。

2. 重新渲染DOM结构

我所做的需求的场景为，当切换不同的选项时，直播地址要跟着切换，加载不同的视频。

原以为这还不简单，直接替换直播地址就好咯，结果发现页面没有变化，查看了DOM结构发现，当创建了一个EZUIKit对象后，DOM结构是改变了的。

代码中的DOM结构：

<div class="video-content">
      <video id="myPlayer" controls playsinline webkit-playsinline autoplay width="800" height="600">
        <source :src="直播地址" type="rtmp/flv">
      </video>
  </div>

当new EZUIKit.EZUIPlayer('myPlayer')执行之后，上述HTML代码中的source替换成了Object，加载直播视频。

也就是在一个视频地址加载成功后，页面中已经没有source这个标签了,此时替换直播地址也没有什么用。找了一下萤石开放平台的文档，也没有找到相应的重新加载视频的内容。

最后的解决办法是，让这一段DOM结构重新渲染，重新加载新的视频。

v-if指令每次显示都会重新渲染DOM结构，在嵌套视频的div标签上添加v-if指令,每次切换相应选项时将v-if的值设为false,当请求到新的视频地址时，再将v-if的值设为true,然后重新执行new EZUIKit.EZUIPlayer('myPlayer'),加载新的视频。

优化：当v-if在false与true之间切换时，会造成整个视频块一闪一闪的，体验很不好，在视频块的下面增加一个黑色的遮罩层，当视频消失时，下面的黑色遮罩层就会显示出来，视觉体验会稍好一点。

结束

文中这种重新加载视频的方法是不得已而为之，如果有小伙伴知道其他更好的办法，欢迎留言～

avatar
文章
阅读
粉丝