现在，在网页上播放视频已经越来越流行，但是网上的资料鱼龙混杂，很难找到自己想要的，今天小编就自己的亲身开发体验，手把手从零开始---封装一个vue视频播放器组件。
作为一个老道的前端搬砖师，怎么可能会一心闭门造车呢？还是先去网上找找轮子吧
经过在网上不断的查阅之后，我最终选择了video.js这个轮子，作为我的播放器。好，现在轮子找好了，乍一看，天，好像有点丑。不着急，我再来把它美化美化（二次封装）。
引入video.js 安装 //安装video.js插件 npm install video.js -S //如果需要播放rtmp直播流，需安装一下插件 npm install videojs-flash -S 在组件中简单使用插件 template <template> <div> <div data-vjs-player> <video ref="videoNode">抱歉，您的浏览器不支持</video> </div> </template> script import videojs from "video.js"; //播放器中文，不能使用.js文件 import videozhCN from "video.js/dist/lang/zh-CN.json"; //样式文件注意要加上 import "video.js/dist/video-js.css"; //如果要播放RTMP要使用flash 需要先npm i videojs-flash import "videojs-flash"; export default { data() { return { player: null, }; }, //初始化播放器 mounted(){ let options = { autoplay: true, //自动播放 language: "zh-CN", controls: this.controls, //控制条 preload: "auto", //自动加载 errorDisplay: true, //错误展示 // fluid: true, //跟随外层容器变化大小，跟随的是外层宽度 width: "500px", height: "500px", // controlBar: false, // 设为false不渲染控制条DOM元素，只设置controls为false虽然不展示，但是存在 // textTrackDisplay: false, // 不渲染字幕相关DOM userActions: { hotkeys: true //是否支持热键 }, notSupportedMessage: "此视频暂无法播放，请稍后再试", techOrder: ["h5","flash"],//定义Video.js技术首选的顺序 sources: [ { src: '视频或者直播地址', type: 'video/mp4', //type: 'rtmp/flv', } ] }; this.player = videojs( this.$refs.videoNode, options, function onPlayerReady() { videojs.log(`Your player is ready!`); } ); videojs.addLanguage("zh-CN", videozhCN); }, beforeDestroy() { if (this.player) { this.player.dispose(); } } }这样一个简单的视频播放功能就实现了。这里小编也给大家整理了一些video.js常用的配置项：
常用选项autoplay：true/false 播放器准备好之后，是否自动播放 【默认false】
controls：true/false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
height: 视频容器的高度，字符串或数字 单位像素 比如： height:300 or height:‘300px‘
width: 视频容器的宽度, 字符串或数字 单位像素
loop : true/false 视频播放结束后，是否循环播放
muted : true/false 是否静音
poster: 播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL
preload:预加载 ‘auto‘ 自动、、’metadata‘ 元数据信息，比如视频长度，尺寸等、‘none‘ 不预加载任何数据，直到用户开始播放才开始下载
Video.js特定的选项除非另有说明，否则默认情况下每个选项undefined
aspectRatio类型： string
将播放器置于流体模式，并在计算播放器的动态大小时使用该值。该值应表示比率 - 由冒号（例如"16:9"或"4:3"）分隔的两个数字。
autoSetup类型： boolean
阻止播放器为具有data-setup属性的媒体元素运行autoSetup 。
注意：必须在与videojs.options.autoSetup = falsevideojs源加载生效的同一时刻全局设置。
fluid类型： boolean
设置为true，Video.js播放器将具有流畅的大小。换句话说，它将扩展以适应其容器。
此外，如果元素具有"vjs-fluid"，则此选项自动设置为true。
inactivityTimeout类型： number
Video.js表示用户通过"vjs-user-active"和"vjs-user-inactive"类以及"useractive"事件与玩家进行交互。
在inactivityTimeout决定了不活动的许多毫秒声明用户闲置之前是必需的。值为0表示没有inactivityTimeout，用户永远不会被视为非活动状态。
language键入：string，默认值：浏览器默认值或’en’
与播放器中的一种可用语言匹配的语言代码。这为播放器设置了初始语言，但始终可以更改。
在Video.js中了解有关语言的更多信息。
languages类型： Object
自定义播放器中可用的语言。此对象的键将是语言代码，值将是具有英语键和翻译值的对象。
在Video.js中了解有关语言的更多信息
注意：通常，不需要此选项，最好将自定义语言传递给videojs.addLanguage()所有玩家！
nativeControlsForTouch类型： boolean
明确设置关联技术选项的默认值。
notSupportedMessage类型： string
允许覆盖Video.js无法播放媒体源时显示的默认消息。
playbackRates类型： Array