很多小伙伴使用原生video标签播放服务器返回的地址的视频,但是会发现video标签对视频的格式限制很多，限制MP4，WebM，Ogg三种格式的视频格式。但是对于需求不限制于此，就需要引入插件库，这里引入第三方插件库video.js来实现更多的需求。注意：video.js也限制视频格式，可在官网查询对应的格式，但已经满足基本需求。
那么步骤开始：
1.npm install --save-dev video.js 命令行引入video.js
2.main.js做以下操作进行引入样式及文件
importVideofrom'video.js'
import'video.js/dist/video-js.css'
Vue.prototype.$video = Video
3.封装组件videoplay.vue 注：为什么要封装组件（1.复用性高避免重复造轮子。2.视频的地址要进来就初始化，父页面没办法直接初始化视频地址，只有用户上传过才会有的。）
4.父页面引入组件<videoplay :url="movie" />
这里的movie是你的服务器返回的视频地址通过props传参传到子组件，如果是服务端返回的地址需要拼接上能播放的前缀地址
这里要注意：要在父页面注册为子组件
文章来源：https://www.toymoban.com/news/detail-670326.html
大家如果有什么不懂可以留言，我也是个小白勿喷！能帮到大家更好。文章来源地址https://www.toymoban.com/news/detail-670326.html
到了这里，关于vue项目引入video.js播放不同格式视频的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
