现在,在网页上播放视频已经越来越流行,但是网上的资料鱼龙混杂,很难找到自己想要的,今天小编就自己的亲身开发体验,手把手从零开始—封装一个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源加载生效的同一时刻全局设置。