Dplayer
小于 1 分钟
提示
本插件不再提供 DPlayer 快速接入功能,并建议用户使用 js 直接引入,详情见下方示例。
提示
详细配置说明见 DPlayer 文档
安装
NPM
npm install -D dplayer
PNPM
pnpm add -D dplayer
YARN
yarn add -D dplayer
使用和示例
基本使用
<div ref="dp0" />
<script>
export default {
mounted() {
this.$nextTick(() => {
import("dplayer").then(({ default: DPlayer }) => {
this.dp1 = new DPlayer({
container: this.$refs.dp0,
video: {
url: "/assets/video/s_720.mp4",
thumbnails: "/assets/video/thumbnails.jpg",
},
});
});
});
},
beforeUnmount() {
this.dp0.destroy();
},
};
</script>
弹幕
<div ref="dp1" />
<script>
export default {
mounted() {
this.$nextTick(() => {
import("dplayer").then(({ default: DPlayer }) => {
this.dp2 = new DPlayer({
container: this.$refs.dp1,
video: {
url: "/assets/video/s_720.mp4",
thumbnails: "/assets/video/thumbnails.jpg",
},
danmaku: {
api: "https://danmu.u2sb.com/api/dplayer/",
id: "cENuyhsT2rMOCohK",
addition: [
"https://danmu.u2sb.com/api/dplayer/v3/bilibili/BV1zt411t79A",
],
},
});
});
});
},
beforeUnmount() {
this.dp1.destroy();
},
};
</script>
HLS
提示
需安装 hls.js
npm install -D hls.js
<div ref="dp2" />
<script>
export default {
mounted() {
this.$nextTick(() => {
import("dplayer").then(({ default: DPlayer }) => {
this.dp2 = new DPlayer({
container: this.$refs.dp2,
video: {
url: "/assets/video/dash/master.m3u8",
thumbnails: "/assets/video/thumbnails.jpg",
type: "customHLS",
customType: {
customHLS: function (video, player) {
import("hls.js").then(({ default: Hls }) => {
const hls = new Hls();
hls.loadSource(video.src);
hls.attachMedia(video);
player.on("destroy", function () {
hls.destroy();
});
});
},
},
},
});
});
});
},
beforeUnmount() {
this.dp2.destroy();
},
};
</script>
其他库
略,请自行脑补使用方式