需求:播放视频,技术框架vue3+element plus。因为前人项目用到了dplayer这个组件。发现还挺好用的。推荐使用
使用方法(直接上代码了)
封装的方法
import DPlayer from 'dplayer';
// 初始化播放器flv格式
export function initPlayer(
videoUrl: string,
videoPic = '',
isLive = false,
playerId = 'dplayer',
autoplay?: number,
) {
var flvPlayer: any = null;
const dp: any = new DPlayer({
container: document.getElementById(playerId),
live: isLive, // 开启直播模式
autoplay: autoplay ? false : true, //视频自动播放
theme: '#FADFA3', //主题色
loop: true, //视频循环播放
lang: 'en', //可选值: 'en', 'zh-cn', 'zh-tw'
screenshot: false, //开启截图,如果开启,视频和视频封面需要允许跨域
hotkey: false, //开启热键,支持快进、快退、音量控制、播放暂停
preload: 'auto',
preventClickToggle: autoplay ? false : true, //阻止点击播放器时候自动切换播放/暂停
volume: 0,
mutex: false, // 防止同时播放多个用户,在该用户开始播放时暂停其他用户
video: {
url: videoUrl,
pic: videoPic,
type: 'customFlv',
customType: {
customFlv: function (video: any, player: any) {
console.log('查看传递的参数', video, player);
flvPlayer = Flv.createPlayer({
type: 'flv',
url: video.src,
});
flvPlayer.attachMediaElement(video);
flvPlayer.load();
},
},
},
});
dp.on('error', function () {
console.log('212423244');
});
return { dp: dp, flv: flvPlayer };
}
// 初始化播放器MP4格式
export function initPlayerMP4(
videoUrl: string,
videoPic = '',
playerId = 'dplayer',
autoplay?: number,
) {
const dp: any = new DPlayer({
container: document.getElementById(playerId),
autoplay: autoplay ? false : true, //视频自动播放
theme: '#FADFA3', //主题色
loop: true, //视频循环播放
lang: 'en', //可选值: 'en', 'zh-cn', 'zh-tw'
screenshot: false, //开启截图,如果开启,视频和视频封面需要允许跨域
hotkey: false, //开启热键,支持快进、快退、音量控制、播放暂停
preload: 'auto',
preventClickToggle: autoplay ? false : true, //阻止点击播放器时候自动切换播放/暂停
volume: 0,
mutex: true,
video: {
url: videoUrl,
pic: videoPic,
type: 'auto',
},
});
return { dp: dp, flv: null };
}
vue文件中使用
import { initPlayerMP4, initPlayer } from 'yourpath';
const dp = ref<any>();
if(type==".mp4"){
dp.value = initPlayerMP4(
fileName!,
getTotal.value?.items[getCurrent.value - 1]?.snapshot,
'dplayer',
2,
);
}else if(type==".flv"){
dp.value = initPlayer(
fileName!,
getTotal.value?.items[getCurrent.value - 1]?.snapshot,
false,
'dplayer',
2,
);
}
<div style="height: 70vh" ref="dp"></div>
总结
- 因为我这里视频格式不固定,所以封装了两个方法,但其实我感觉一个就可以。但是前人的代码,就懒得改了。新的项目我直接要求了最好给我固定是mp4格式。省了很多事(哈哈)。
- 然后就是多看插件文档。其实大部分文档都写的很清楚。然后去github源码上的Issue里面查看问题