在 Vue 项目中使用 videojs 做 hls 直播流时，遇到的问题及其解决方案（销毁、反复加载视频流）

我就是我 2022-09-10 15:15 3712阅读 0赞

--------------------

***该博文主要用于自我总结。文中内容就是在 Vue 项目中，使用 videojs 实现 hls 直播流的播放。由于文中参考了很多文章，所以重合的部分就不在这里展现，如有需要即可前往原文章查阅。而本文主要是用于记录在这过程中遇到的问题及其解决方案***

--------------------

### videojs ###

*  简要说明
 *  何为 videojs
 *  Vue 中使用 videojs 做 rtmp 和 hls 直播流
 *  videojs 的监听事件
 *  部分问题
 *   *  The element or ID supplied is not valid
     *  相关代码
     *  销毁问题
     *  防抖问题
     *  未获取到对应视频流的重新加载问题

--------------------

# 简要说明 #

目前遇到了一个需求，就是能够在页面上看到直播流。那么针对这样的一个问题，毫无疑问，如果没有接触过其他用法的开发人员（包括我），第一时间就会想到 HTML5 的 video 标签。但是 video 标签真的能够去展现一个实时的直播流吗？

实际上，`<video>` 元素仅支持三种视频格式： MP4、WebM 和 Ogg。

MP4=带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM=带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

Ogg=带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

更多关于 `<video>` 标签本身的使用，可参考我的文章：[HTML5 音视频标签][HTML5]

随后，通过网上冲浪，我们就可以发现还真有其他的解决方案，即 videojs。而由于网上也没有个比较好的教程，所以只能通过各位前辈们的博客去搜集资料，不断试错，最终找到了当前可以实现的解决方案，而且解决了部分常见问题。在这里进行总结，希望能够给各位提供帮助和思路。

参考的所有文章如下：

videojs 官网：[https://videojs.com/][https_videojs.com] （全英无中）

视频播放插件Video.js：[https://www.jq22.com/plugin/404][https_www.jq22.com_plugin_404]

可进行测试的 m3u8 链接：[https://blog.csdn.net/myjie0527/article/details/117385253][https_blog.csdn.net_myjie0527_article_details_117385253]

项目经验和踩坑 - Vue中使用videojs做rtmp和hls直播流：[https://blog.csdn.net/weixin\_44238796/article/details/105808404][https_blog.csdn.net_weixin_44238796_article_details_105808404]

vue项目中video.js的使用总结：[https://blog.csdn.net/weixin\_39135926/article/details/118225035][https_blog.csdn.net_weixin_39135926_article_details_118225035]

videojs的一些监听事件汇总：[https://blog.csdn.net/Q147351/article/details/106663908/][https_blog.csdn.net_Q147351_article_details_106663908]

--------------------

# 何为 videojs #

首先 videojs 是一个开源 HTML5 播放器框架。  
![在这里插入图片描述][4b9c8500c9754c9fbc41123d195899c0.png]  
它有很多的特点：  
1、在上面提到了，我们使用 videojs 就是它不仅可以播放传统的文件格式，比如：MP4、WebM、Ogg，也能够支持自适应流格式，如 Hls、rtmp；  
2、播放器开箱即用，而且可以很轻松的设置额外的 CSS 样式；  
3、它有 100 多个插件，可以提供相关支持；  
4、使用 videojs 可以支持现代的所有浏览器，包括桌面和移动浏览器。

如果各位对除了基本使用以外的内容感兴趣，可前往官网查看。

--------------------

# Vue 中使用 videojs 做 rtmp 和 hls 直播流 #

由于网上有很多繁杂的内容，而且大多是直接在 html 中使用，而不是针对 Vue，所以找到基本的使用方法是费了很长时间。因为这部分直接使用参考文章中的代码，就可以实现，所以我这里也就不复述了，请直接去原作者文章中查看：[项目经验和踩坑 - Vue中使用videojs做rtmp和hls直播流][https_blog.csdn.net_weixin_44238796_article_details_105808404]

--------------------

# videojs 的监听事件 #

对于完整的监听事件，您可以直接前往原作者文章中查看：[videojs的一些监听事件汇总][https_blog.csdn.net_Q147351_article_details_106663908]

后续在解决部分问题时，就将会用到其中的部分事件。

--------------------

# 部分问题 #

接下来将是本文的重要内容，在这里将记录做 hls 直播流过程中遇到的问题总结和相关解决方案。

--------------------

## The element or ID supplied is not valid ##

不知道各位朋友在使用的时候有没有遇到过下面的报错：  
![在这里插入图片描述][56d003f5e994404eacbb62468b277402.png]  
针对这个报错，网上也有相关的参考方案，您可查阅这些文章进行查看：

[video.js多个视频初次加载报错The element or ID supplied is not valid][video.js_The element or ID supplied is not valid]

[videojs中遇到的问题][videojs]

而我尝试了这两个方法后，发现问题没有解决。其实问题的出现原因是差不多的，就是在使用 videojs 获取 ID 时，遇到了问题。那么我的问题出现的就很啼笑皆非了，经过排查发现，我出现问题的原因很简单，就是我在使用 getElementByID 时，ID 写错了，且在写 ID 名时，不能含有 \# 特殊字符（其他特殊字符未尝试）。同时也需要注意执行顺序。

--------------------

## 相关代码 ##

为了更好的解释下面遇到的三个问题，在这里展示一下相关代码：

<template>
      <el-dialog :visible="dialogFormVisible" append-to-body width="650px" :title="title" :show-close="false" @input="e=>$emit('update:dialogFormVisible',e)" @close="$emit('close')" >
        <el-button type="primary" @click="startTransFlow" >测试</el-button>
        <video v-if="showVideo" :id="cameraIndexCode" class="video-js vjs-default-skin" width="500" height="264" ></video>
        
      </el-dialog>
    </template>
    <script> export default { // ..其他内容 data() { return { // ... showVideo: false, videoPlayer: null, timer: null } }, beforeDestroy() { if (this.videoPlayer !== null) { this.videoPlayer.dispose() // dispose()会直接删除Dom元素 } }, methods: { // .... startTransFlow() { if (this.timer === null) { /* 防抖 */ this.timer = setTimeout(() => { this.timer = null }, 35000) // ... // 调用接口，触发生成 m3u8 文件的事件 // ... const _this = this; this.$message.info('摄像头加载中'); this.showVideo = true; setTimeout(() => { // 选中的要播放的video标签 this.videoPlayer = this.$video(document.getElementById(this.cameraIndexCode), { autoplay: true, // 是否自动播放 controls: true // 是否显示控件 }, function onPlayerReady() { let num = 1; this.on('canplaythrough', () => { _this.$message.success('摄像头加载成功'); }); // 加载失败会在有限次数内，不断重试 this.on('error', () => { if (num > 3) { _this.$message.error('摄像头加载失败，请重新尝试'); num = 1; } else { _this.$message.info('摄像头第' + num + '次尝试加载....'); num++; setTimeout(() => { this.src(url); this.play(); }, 10000) } }); this.src(url); this.play(); }) }, 5000) } } } } </script>

--------------------

## 销毁问题 ##

实现销毁是很简单的，就是在对应的时间点上去触发 dispose 事件。

beforeDestroy() { 
        if (this.videoPlayer !== null) { 
          this.videoPlayer.dispose() // dispose()会直接删除Dom元素
        }
      },

但是需要注意的是，当我们对 videojs 对象使用了 dispose 事件后，它就会直接删除这个 DOM 元素。那么这会有什么后果，而为什么要进行销毁？

1、首先，我们必须要在不想播放该视频流的时候进行销毁。因为现在是直播，如果我们不对其进行销毁，那么离开页面后，这部分切片内容（即视频）仍然会不断的进行获取。那显而易见的，如果用户又点击查看了不同的视频流，最后获取到的内容越来越多，甚至页面崩溃。（PS：对于这个问题，其实我也需要画个疑问，因为在当前的需求中，视频流是在一个 el-dialog 上展现的，经过测试发现，如果不销毁，关闭对话框，视频流依然会不断获取。而在普通页面上进行切换后，是否仍会获取，就暂不清楚，所以这确实是个需要留意的问题）  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y-q54it5pyd5aSV5LiN6LKg6Z-26I-v_size_20_color_FFFFFF_t_70_g_se_x_16]  
2、现在我们已经知道了需要对它进行销毁，那么直接使用 dispose 会有什么后果？

在上面已经提到了，这样操作会直接删除这个 DOM 元素。这就会导致，使用 dispose 后，如果还想去测试视频流，此时 DOM 元素被删除，也就永远无法再查看该视频流。因为在 videojs 中，需要获取 video 标签的 ID，从而对该视频进行处理。

所以，现在的解决方案就是：在合适的时间进行销毁，在合适的时间创建这个 DOM 元素。而这样做肯定会很麻烦。那么是否有简单的办法呢？

3、有的。针对这个问题，我们现在再总结一下就是：

（1）在离开页面或者想重新获取视频流时，我们需要将之前的 videojs 进行销毁。

（2）在想播放视频流时，要保证 video 标签的存在。

针对以上可能出现的复杂判定条件，我们可以利用 v-if 的特性。 v-if 的特性就是它在 true、false 转化时，对组件是重新销毁和创建的。那么这样就很清晰了。当我们想要实现销毁时，就去切换 v-if，从而触发该组件的 beforeDestroy 事件。简单来说，就是这样：

<form-dialog v-if="dialogFormVisible" ></form-dialog>

而当再次切换 v-if 后，组件重新创建，video 标签也就又出现了。

--------------------

## 防抖问题 ##

防抖的代码就是这样的：

if (this.timer === null) { 
      /* 防抖 */
      this.timer = setTimeout(() => { 
        this.timer = null
      }, 25000)
       /* ... 调用接口，video处理 */
    }

这个是很好理解的。因为在这里的需求时，点击按钮后去检测视频流。当我们点击按钮后，用户可能会误操作点击多次按钮，这样一来就会触发多次接口，触发多次 video 事件，出现页面问题。此时可以使用防抖解决问题。代码也很好理解。当然，就算不是点击按钮触发，也需要考虑一下，页面中有没有可能多次触发这些事件。如果多次触发，带来的后果将是不可预估的。

--------------------

## 未获取到对应视频流的重新加载问题 ##

首先在这里需要阐述一下，为什么在想要播放直播流时，后台没有提供给前端对应的 m3u8 文件。在本文的场景中，需要去调用接口，从而让后台对视频流进行处理，从而给前端返回对应的存放 m3u8 位置的路径，让其展现。但是生成是需要时间的，所以就出现了在获取时，可能获取不到从而报错的问题。

但是很显然的，后台正在生成，只不过因为网速原因，文件还没生成出来，所以前端也应该给用户一些友好提示，并作出短暂时间的等待。而为了解决这个问题，就如同上面代码一样，用到了 error 事件。只要遇到了报错，就会进入到该事件中。在代码中将会在有限的次数和时间下，反复去尝试对应的视频源是否加载完毕，并在加载完成后去进行播放。

而反复去尝试的原理，就是使用：

this.src(url);
    this.play();

只要 src 变化，并尝试播放，videojs 就会被调用。它的流程图就是这样的：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y-q54it5pyd5aSV5LiN6LKg6Z-26I-v_size_20_color_FFFFFF_t_70_g_se_x_16 1]

[HTML5]: https://blog.csdn.net/qq_45613931/article/details/106556503
[https_videojs.com]: https://videojs.com/
[https_www.jq22.com_plugin_404]: https://www.jq22.com/plugin/404
[https_blog.csdn.net_myjie0527_article_details_117385253]: https://blog.csdn.net/myjie0527/article/details/117385253
[https_blog.csdn.net_weixin_44238796_article_details_105808404]: https://blog.csdn.net/weixin_44238796/article/details/105808404
[https_blog.csdn.net_weixin_39135926_article_details_118225035]: https://blog.csdn.net/weixin_39135926/article/details/118225035
[https_blog.csdn.net_Q147351_article_details_106663908]: https://blog.csdn.net/Q147351/article/details/106663908/
[4b9c8500c9754c9fbc41123d195899c0.png]: /images/20220829/0b7cd3030f704edd8b7045b9860ef875.png
[56d003f5e994404eacbb62468b277402.png]: /images/20220829/d4f3bab2bc3f43a88f00a97fd4c0d404.png
[video.js_The element or ID supplied is not valid]: https://blog.csdn.net/rosy_yang/article/details/107457921
[videojs]: https://www.cnblogs.com/loveamyforever/p/7047800.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y-q54it5pyd5aSV5LiN6LKg6Z-26I-v_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/6d23f1a3e90b455a9b91c651a7fb0105.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y-q54it5pyd5aSV5LiN6LKg6Z-26I-v_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/eefaed78392f4a6f8f77f2177d18e206.png