安装
npm i hls.js
npm i dplayer
引入
import Hls from "hls.js";
import DPlayer from 'dplayer';
播放
<div ref="player"></div>
play() {
const that = this;
this.optionsPlayer = new DPlayer({
container: this.$refs.player, //播放器容器
autoplay: true,
mutex: false, // 防止同时播放多个用户,在该用户开始播放时暂停其他用户
theme: "#b7daff", // 风格颜色,例如播放条,音量条的颜色
loop: true, // 是否自动循环
lang: "zh-cn", // 语言,'en', 'zh-cn', 'zh-tw'
screenshot: true, // 是否允许截图(按钮),点击可以自动将截图下载到本地
hotkey: true, // 是否支持热键,调节音量,播放,暂停等
preload: "auto", // 自动预加载
volume: 0.7, // 初始化音量
playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2, 3], //可选的播放速度,可自定义
video: {
type: "customHls",
url: url, // 播放视频的路径
customType: {
customHls: function (video, player) {
that.hls?.destroy();
that.hls = new Hls();
that.hls.loadSource(video.src);
that.hls.attachMedia(video);
},
},
defaultQuality: 0, // 默认是高清
},
contextmenu: [
// 自定义上下文菜单
// 右键菜单
{
text: "选项二",
click: (player) => {
console.log(player);
},
},
],
highlight: [
//进度条上的自定义时间标记
// 进度条时间点高亮
{
text: "10M",
time: 6,
},
{
text: "20M",
time: 12,
},
],
});
}
销毁
this.hls?.destroy();
this.optionsPlayer?.destroy();
操作(需搭配萤石云后台操作接口)
//direction:0-上,1-下,2-左,3-右,4-左上,5-左下,6-右上,7-右下,8-放大,9-缩小,10-近焦距,11-远焦距
需先调用接口获取token