首先声明一下，这篇文章只是我使用时的一个坑，关于video.js我没有全部使用。首先，vue是指video.js引用的video.js的版本。话不多说，7及以上版本就不用flash了，所以很多人用5版本。先说说自己的感受吧。我认为他们几乎是一样的。使用更高版本，可以兼容很多东西。npminstallvideo.js--savenpminstallvideojs-contrib-hls--save另一种参考是直接导入html中的文件，这里再提醒一下根据自己本地路径配置，导入的js一定要放在body，否则会报错。我暂时直接导入。我介绍的7.0.3版本很好找，高版本应该也能兼容。度娘！！！表示页面使用，有两种情况直接npm暂且。那就是直接模块导入使用，我贴给你，让你看看import'video.js/dist/video-js.css'importvideojsfrom'video.js'import'videojs-contrib-hls'这个可能有问题，说是找不到css，具体报错就不说了。修改的话，去node_modules里面的video文件夹。路径不对？如果不对，请修改。原因是根据版本不同，路径可能不同。还有一个原因就是我们新建一个vue项目的时候，少了一个配置文件。下面我给大家贴一下。如果没有发现错误，请看看是不是少了这个！！！少了自己去看看有没有以前的档案，复制过来就行，实在没有，那就只能救你妈了！！！！如果你导入文件，那么上面的步骤就没有了。这是HTML代码：:poster="poster">3.js中的使用，具体配置数据我就不说了：{return:{myVideo:{}}}mounted(){//最好有这个.$nextTick，否则会报第二个错误，请看下面的错误！！！this.$nextTick(()=>{this.getVideoli();});}getVideoli(){this.myVideo=videojs("myVideo",{bigPlayButton:true,textTrackDisplay:false,posterImage:false,errorDisplay:false,loop:true,autoplay:true,hls:{withCredentials:false,}},functiononPlayerReady(){this.on("error",function(){//播放过程中由于网络或其他原因等待，此时时间，视频播放暂停，网络恢复后，会自动执行[playing]autoplay//这里是只要报错就重新请求直播的函数});})}一些在此参数不多说了，直接搜索就可以了，重点关注回调函数：error等错误事件名称，方法自己搜索即可，这里不介绍，直接介绍我的那个在这里使用Error事件，你应该更经常地使用它。附上事件链接video.js事件4.最后一个错误：1.css错误，上面有介绍，我就不说了，如果第一种直接npm方法不行，直接导入文件，我亲测过没问题2.第二个运行，报错，说ID错误[Vuewarn]:Errorinmountedhook:"TypeError:TheelementorIDsuppliedisnotvalid.(videojs)"解决方法：首先检查，parentis不是v-if丢了，而是被v-show代替了。二是看你有没有写这个。$nextTick在执行方法中。三是检查你的ID和html上的是否一致。3.视频卡顿卡顿的问题我找了很多解决方法，总觉得没有办法解决。然后看到有回调函数，就可以在回调函数上做文章了。有一个代码的具体情况在我面前。您可以查看事件以及您要使用的内容。方法五，总结一下我目前做的视频直播。我们给我们m3u8视频流，所以我们会遇到卡顿。我们会根据报错的回调函数重新请求视频流。这也是我第一次使用视频。js小白，一路上遇到问题自己解决。如果你不明白，请原谅我。如果您有任何疑问或交流意见，请联系我们，互相学习。附上Video.js官网地址：video.js
