video.js 是一款优秀的视频播放器组件, 官网的文档是直接以 JS 标签引入的方式使用的, 对 ES6 模块风格的方式完全空白, 本文记录一下我在 vue 项目中是如何使用 video.js 的(踩过的坑)
安装与使用
输入命令行, 下载video.js
cnpm i video.js
main.js中引入
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video;
为了复用, 可以新建一个Player.vue组件, 然后在template中加入video标签:
controls
class="video-js vjs-default-skin vjs-big-play-centered">
覆盖全局样式:
.vjs-big-play-button {
height: 3em !important;
width: 3em !important;
line-height: 3em !important;
border-radius: 50% !important;
}
.vjs-button > .vjs-icon-placeholder:before {
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
.vjs-slider-horizontal .vjs-volume-level:before {
top: -0.333333333333333em;
right: -0.5em;
}
.vjs-playback-rate .vjs-playback-rate-value {
font-size: 1.8em;
display: flex;
align-items: center;
justify-content: center;
}
.vjs-control-bar {
background: rgba(0,0,0,.8) !important;
}
.video-js .vjs-play-progress, .video-js .vjs-volume-level {
background: linear-gradient(to right, #FF7B02, #FFA604) !important;
}
.video-js:hover .