1.npm或者yarn安装dplayer
npm install dplayer --save
yarn add dplayer
2.安装后在使用页面中引入
import DPlayer from 'dplayer';
3.在页面中使用
html中
<template>
<div>
<div id="dplayer"></div>
</div>
</template>
js中
methods:{
方法名(){
this.dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
url:'', //视频路径
pic:'./2.png'
},
autoplay: false, //自动播放
theme: '#b7daff', //主题色
loop: true, //循环播放
lang: 'zh-cn', //语言
// screenshot: true, //截图
hotkey: true, //热键:→快进等
preload: 'auto', //预加载
logo: require('./1.png'), //左上方log
volume: 0.7, //默认音量
mutex: true, //互斥
contextmenu: [
{
text: 'custom1'
},
{
text: 'custom2'
},
],
// danmaku:true,
highlight: [],
});
//执行API
this.dp.on('play', ()=> { //开始播放
});
this.dp.on('timeupdate', ()=> {//记录当前播放时间
console.log(this.dp.video.currentTime)
});
},
//切换播放源
方法名(){
this.dp.switchVideo({
url:""
})
},
}