video怎么重新加载 vue_Vue 中使用 video.js

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 .