现在,在网页上播放视频已经越来越流行,但是网上的资料鱼龙混杂,很难找到自己想要的,今天小编就自己的亲身开发体验,手把手从零开始---封装一个vue视频播放器组件。
❝作为一个老道的前端搬砖师,怎么可能会一心闭门造车呢?还是先去网上找找轮子吧
❞
经过在网上不断的查阅之后,我最终选择了video.js这个轮子,作为我的播放器。好,现在轮子找好了,乍一看,天,好像有点丑。不着急,我再来把它美化美化(二次封装)。
![e3bbd5be0f442c1c9f8a9e47042c96d2.png](https://i-blog.csdnimg.cn/blog_migrate/e5e3775a4a4a0328e39107442e1620de.png)
引入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: 播放前显示的视频画面,播放开始之后自动移除。通常传入一个URLpreload:预加载 ‘auto‘ 自动、、’metadata‘ 元数据信息,比如视频长度,尺寸等、‘none‘ 不预加载任何数据,直到用户开始播放才开始下载
Video.js特定的选项
除非另有说明,否则默认情况下每个选项undefined
aspectRatio
类型:string