ArtPlayer
# 介绍
可以插入 artplayer 标签。
# 使用和示例
# 参数
src:Object传参，具体参数见 ArtPlayer 文档 (opens new window)，示例见下方 DEMO。width:String播放器宽度，默认为"100%"height:Array<Number>播放器高度，默认为[ 9/16, 0 ]，对应 css 高度计算为：width * height[0] + height[1]
# 基本使用
<ClientOnly>
<Artplayer :src="art" :on="on" />
</ClientOnly>
<script>
export default {
data() {
return {
art: {
url: "/assets/video/s_720.mp4",
},
on: {
pause: (player, src) => {
alert("广告位招租");
},
},
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 弹幕
<ClientOnly>
<Artplayer :src="artDan" />
</ClientOnly>
<script>
import artplayerPluginDanmuku from "artplayer-plugin-danmuku";
const danmu =
"https://danmu.u2sb.com/api/artplayer/v1/bilibili/BV1zt411t79A.json";
export default {
data() {
return {
artDan: {
url: "/assets/video/s_720.mp4",
plugins: [
artplayerPluginDanmuku({
danmuku: () =>
fetch(danmu)
.then((res) => res.json())
.then((res) => res.data),
speed: 5, // Animation time
opacity: 1, // Opacity
color: "#fff", // Font color
size: 25, // Font size
maxlength: 50, // The maximum number of words in the danmu
margin: [10, 20], // Margin top and margin bottom
synchronousPlayback: false, // Synchronous playback speed
}),
],
},
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# FLV 视频
以下几种情况会自动引入 flv.js ：
url以.flv结尾且type类型为undefinedtype值为flv
<ClientOnly>
<Artplayer :src="artFlv" />
</ClientOnly>
<script>
import artplayerPluginDanmuku from "artplayer-plugin-danmuku";
const danmu =
"https://danmu.u2sb.com/api/artplayer/v1/bilibili/BV1zt411t79A.json";
export default {
data() {
return {
artFlv: {
url: "/assets/video/s_720.flv",
type: "flv",
plugins: [
artplayerPluginDanmuku({
danmuku: () =>
fetch(danmu)
.then((res) => res.json())
.then((res) => res.data),
speed: 5, // Animation time
opacity: 1, // Opacity
color: "#fff", // Font color
size: 25, // Font size
maxlength: 50, // The maximum number of words in the danmu
margin: [10, 20], // Margin top and margin bottom
synchronousPlayback: false, // Synchronous playback speed
}),
],
},
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# HLS 视频
以下几种情况会自动引入 hls.js
url以.m3u8结尾且type类型为undefinedtype值为hls或m3u8
<ClientOnly>
<Artplayer :src="artHls" />
</ClientOnly>
<script>
import artplayerPluginDanmuku from "artplayer-plugin-danmuku";
const danmu =
"https://danmu.u2sb.com/api/artplayer/v1/bilibili/BV1zt411t79A.json";
export default {
data() {
return {
artHls: {
url: "/assets/video/dash/master.m3u8",
type: "hls",
plugins: [
artplayerPluginDanmuku({
danmuku: () =>
fetch(danmu)
.then((res) => res.json())
.then((res) => res.data),
speed: 5, // Animation time
opacity: 1, // Opacity
color: "#fff", // Font color
size: 25, // Font size
maxlength: 50, // The maximum number of words in the danmu
margin: [10, 20], // Margin top and margin bottom
synchronousPlayback: false, // Synchronous playback speed
}),
],
},
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# Dash
以下几种情况会自动引入 dash.js
type值为dash
<ClientOnly>
<Artplayer :src="artDash" />
</ClientOnly>
<script>
import artplayerPluginDanmuku from "artplayer-plugin-danmuku";
const danmu =
"https://danmu.u2sb.com/api/artplayer/v1/bilibili/BV1zt411t79A.json";
export default {
data() {
return {
artDash: {
url: "/assets/video/dash/stream.mpd",
type: "dash",
plugins: [
artplayerPluginDanmuku({
danmuku: () =>
fetch(danmu)
.then((res) => res.json())
.then((res) => res.data),
speed: 5, // Animation time
opacity: 1, // Opacity
color: "#fff", // Font color
size: 25, // Font size
maxlength: 50, // The maximum number of words in the danmu
margin: [10, 20], // Margin top and margin bottom
synchronousPlayback: false, // Synchronous playback speed
}),
],
},
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# ShakaDash
以下几种情况会自动引入 shaka-player.js
url以.mpd结尾且type类型为undefinedtype值为shaka或shakadash或shaka-dash
<ClientOnly>
<Artplayer :src="artShakaDash" />
</ClientOnly>
<script>
import artplayerPluginDanmuku from "artplayer-plugin-danmuku";
const danmu =
"https://danmu.u2sb.com/api/artplayer/v1/bilibili/BV1zt411t79A.json";
export default {
data() {
return {
artShakaDash: {
url: "/assets/video/dash/stream.mpd",
type: "shakadash",
plugins: [
artplayerPluginDanmuku({
danmuku: () =>
fetch(danmu)
.then((res) => res.json())
.then((res) => res.data),
speed: 5, // Animation time
opacity: 1, // Opacity
color: "#fff", // Font color
size: 25, // Font size
maxlength: 50, // The maximum number of words in the danmu
margin: [10, 20], // Margin top and margin bottom
synchronousPlayback: false, // Synchronous playback speed
}),
],
},
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# customType
npm install hls.js
1
<ClientOnly>
<Artplayer :src="artCustomHls" />
</ClientOnly>
<script>
import artplayerPluginDanmuku from "artplayer-plugin-danmuku";
const danmu =
"https://danmu.u2sb.com/api/artplayer/v1/bilibili/BV1zt411t79A.json";
export default {
return {
artCustomHls: {
url: "/assets/video/dash/master.m3u8",
type: "customHls",
plugins: [
artplayerPluginDanmuku({
danmuku: () =>
fetch(danmu)
.then((res) => res.json())
.then((res) => res.data),
speed: 5, // Animation time
opacity: 1, // Opacity
color: "#fff", // Font color
size: 25, // Font size
maxlength: 50, // The maximum number of words in the danmu
margin: [10, 20], // Margin top and margin bottom
synchronousPlayback: false, // Synchronous playback speed
}),
],
customType: {
customHls: function (video, url, player) {
import(
/* webpackChunkName: "hls" */ "hls.js/dist/hls.min.js"
).then(({ default: Hls }) => {
const hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
player.on("destroy", function () {
hls.destroy();
});
});
},
},
},
};
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# MSE 支持
注意
插件中部分代码是由 Copilot 自动生成，未经严格测试，如发现问题请及时反馈。
默认配置了几种受支持的类型 (不区分大小写)，其他类型请见上方 customType 示例
type: "hls"或type: "m3u8"type: "flv"type: "dash"type: "shakaDash"或type: "shaka"或type: "shaka-dash"type: "webtorrent"
当 type 类型为 undefined 时，以下结尾的链接会自动添加对应类型
.m3u8.flv.mpd
# 配置
主题下插件配置为默认配置，每个 <Artplayer /> 标签下的设置会覆盖默认配置。
module.exports = {
plugins: [
[
"smplayer",
{
artplayer: {
src: {
fullscreen: true,
autoSize: true,
setting: true,
playbackRate: true,
whitelist: ["*"],
},
width: "100%",
height: [9 / 16, 0],
},
},
],
],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
或
module.exports = {
plugins: {
smplayer: {
artplayer: {
src: {
fullscreen: true,
autoSize: true,
setting: true,
playbackRate: true,
whitelist: ["*"],
},
width: "100%",
height: [9 / 16, 0],
},
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
上次更新: 10/4/2022, 11:21:17 PM