手把手从零开始---封装一个vue视频播放器组件

现在，在网页上播放视频已经越来越流行，但是网上的资料鱼龙混杂，很难找到自己想要的，今天小编就自己的亲身开发体验，手把手从零开始—封装一个vue视频播放器组件。

作为一个老道的前端搬砖师，怎么可能会一心闭门造车呢？还是先去网上找找轮子吧

经过在网上不断的查阅之后，我最终选择了video.js这个轮子，作为我的播放器。好，现在轮子找好了，乍一看，天，好像有点丑。不着急，我再来把它美化美化（二次封装）。
引入video.js
安装

//安装video.js插件
npm install video.js -S

//如果需要播放rtmp直播流，需安装一下插件
npm install videojs-flash -S

在组件中简单使用插件
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源加载生效的同一时刻全局设置。

更多请见：http://www.mark-to-win.com/tutorial/50714.html