1:安装
cnpm i vue-video-player -S
2:引用:在main.js中引用
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
3:使用(结合你使用框架的dialog即对话框)
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"--------设置视频播放的对象
>
</video-player>
4、配置
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0],//倍速控制
autoplay: true,//是否自动播放
muted: false,//是否静音播放
loop: false,//是否循环播放
preload: "auto",
language: "zh-CN", //语言,还要引入对应的文件
aspectRatio: "16:9",//比例
fluid: true,
sources: [
{
type: "",
src:
"", //url地址
},
],
poster: "", //你的封面地址
notSupportedMessage: "此视频暂无法播放,请稍后再试",
controlBar: {
timeDivider: true,
durationDisplay: true,//剩余时间是否显示
remainingTimeDisplay: false,//剩余时间是否显示,有一个即可
fullscreenToggle: true,//全屏按钮
},
},