Dplayer

提示

本插件不再提供 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>

其他库

略，请自行脑补使用方式