Dplayer

# 介绍

可以插入 dplayer 标签。

# 使用和示例

# 参数

此部分请熟读 DPlayer 文档 (opens new window)

src : Object 传参，具体参数见 DPlayer 文档 (opens new window)，示例见下方 DEMO。
width : String 播放器宽度，默认为 "100%"

# 基本使用

<ClientOnly>
  <DPlayer :src="dplayer" />
</ClientOnly>

<script>
  export default {
    data() {
      return {
        dplayer: {
          video: {
            url: "/assets/video/s_720.mp4",
            thumbnails: "/assets/video/thumbnails.jpg",
          },
        },
      };
    },
  };
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 弹幕

<ClientOnly>
  <DPlayer :src="dplayerDan" />
</ClientOnly>

<script>
  export default {
    data() {
      return {
        dplayerDan: {
          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",
            ],
          },
        },
      };
    },
  };
</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

提示

弹幕使用了 Danmu.Server (opens new window)

# FLV 视频

以下几种情况会自动引入 flv.js

url 以 .flv 结尾且 type 类型为 undefined
type 值为 flv

<ClientOnly>
  <DPlayer :src="dplayerFlv" />
</ClientOnly>

<script>
  export default {
    data() {
      return {
        dplayerFlv: {
          video: {
            url: "/assets/video/s_720.flv",
            thumbnails: "/assets/video/thumbnails.jpg",
            type: "flv",
          },
          danmaku: {
            api: "https://danmu.u2sb.com/api/dplayer/",
            id: "cENuyhsT2rMOCohK",
            addition: [
              "https://danmu.u2sb.com/api/dplayer/v3/bilibili/BV1zt411t79A",
            ],
          },
        },
      };
    },
  };
</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

# HLS 视频

以下几种情况会自动引入 hls.js

url 以 .m3u8 结尾且 type 类型为 undefined
type 值为 hls 或 m3u8

<ClientOnly>
  <DPlayer :src="dplayerHls" />
</ClientOnly>

<script>
  export default {
      return {
        dplayerHls: {
          video: {
            url: "/assets/video/dash/master.m3u8",
            thumbnails: "/assets/video/thumbnails.jpg",
            type: 'hls',
          },
          danmaku: {
            api: "https://danmu.u2sb.com/api/dplayer/",
            id: "cENuyhsT2rMOCohK",
            addition: ["https://danmu.u2sb.com/api/dplayer/v3/bilibili/BV1zt411t79A"],
          },
        }
      };
    }
  };
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Dash

以下几种情况会自动引入 dash.js

type 值为 dash

<ClientOnly>
  <DPlayer :src="dplayerDash" />
</ClientOnly>

<script>
  export default {
      return {
        dplayerDash: {
          video: {
            url: "/assets/video/dash/stream.mpd",
            thumbnails: "/assets/video/thumbnails.jpg",
            type: "dash"
          },
          danmaku: {
            api: "https://danmu.u2sb.com/api/dplayer/",
            id: "cENuyhsT2rMOCohK",
            addition: ["https://danmu.u2sb.com/api/dplayer/v3/bilibili/BV1zt411t79A"],
          },
        },
      };
    }
  };
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# ShakaDash

以下几种情况会自动引入 shaka-player.js

url 以 .mpd 结尾且 type 类型为 undefined
type 值为 shaka 或 shakadash 或 shaka-dash

<ClientOnly>
  <DPlayer :src="dplayerShakaDash" />
</ClientOnly>

<script>
  export default {
      return {
        dplayerShakaDash: {
          video: {
            url: "/assets/video/dash/stream.mpd",
            thumbnails: "/assets/video/thumbnails.jpg",
            type: "shakadash"
          },
          danmaku: {
            api: "https://danmu.u2sb.com/api/dplayer/",
            id: "cENuyhsT2rMOCohK",
            addition: ["https://danmu.u2sb.com/api/dplayer/v3/bilibili/BV1zt411t79A"],
          },
        },
      };
    }
  };
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# customType

npm install hls.js

<ClientOnly>
  <DPlayer :src="dplayerCustomHls" />
</ClientOnly>

<script>
  export default {
      return {
        dplayerCustomHls: {
          video: {
            url: "/assets/video/dash/master.m3u8",
            thumbnails: "/assets/video/thumbnails.jpg",
            type: 'customHls',
            customType: {
              customHls: function (video, player) {
                import(/* webpackChunkName: "hls" */ "hls.js/dist/hls.min.js").then(({ default: Hls })=> {
                  const hls = new Hls();
                  hls.loadSource(video.src);
                  hls.attachMedia(video);
                  player.on("destroy", function () {
                    hls.destroy();
                  });
                });
              },
            },
          },
          danmaku: {
            api: "https://danmu.u2sb.com/api/dplayer/",
            id: "cENuyhsT2rMOCohK",
            addition: ["https://danmu.u2sb.com/api/dplayer/v3/bilibili/BV1zt411t79A"],
          },
        }
      };
    }
  };
</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

# 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

# 配置

主题下插件配置为默认配置，每个 <DPlayer /> 标签下的设置会覆盖默认配置。

module.exports = {
  plugins: [
    [
      "smplayer",
      {
        dplayer: {
          src: {},
          width: "100%",
        },
      },
    ],
  ],
};

1
2
3
4
5
6
7
8
9
10
11
12
13

或

module.exports = {
  plugins: {
    smplayer: {
      dplayer: {
        src: {},
        width: "100%",
      },
    },
  },
};

1
2
3
4
5
6
7
8
9
10

#开源项目 #vuepress-plugin-smplayer

上次更新: 10/4/2022, 11:21:17 PM

← Aplayer ArtPlayer→