Xgplayer

# 介绍

可以插入 xgplayer 标签。

# 使用和示例

注意

暂未稳定，参数可能会由改变，请谨慎使用

# 参数

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

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

# 基本使用

<ClientOnly>
  <Xgplayer :src="xg" :on="on" />
</ClientOnly>

<script>
  export default {
    data() {
      return {
        xg: {
          url: "/assets/video/s_720.mp4",
          thumbnail: {
            pic_num: 100,
            width: 160,
            height: 90,
            col: 1,
            row: 100,
            urls: ["/assets/video/thumbnails.jpg"],
            isShowCoverPreview: false,
          },
        },
        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
21
22
23
24
25
26
27
28
29

# 弹幕

<ClientOnly>
  <Xgplayer :src="xgDan" />
</ClientOnly>

<script>
  export default {
    data() {
      return {
        xgDan: {
          url: "/assets/video/s_720.mp4",
          thumbnail: {
            pic_num: 100,
            width: 160,
            height: 90,
            col: 1,
            row: 100,
            urls: ["/assets/video/thumbnails.jpg"],
            isShowCoverPreview: false,
          },
          danmu: {
            panel: true,
          },
          customInit: async (xgplayer, src) =>
            fetch(
              "https://danmu.u2sb.com/api/artplayer/v1/bilibili/BV1zt411t79A.json"
            )
              .then((res) => res.json())
              .then((json) => {
                let id = 0;
                src.danmu.comments = json.data.map((e) => {
                  id = id + 1;
                  return {
                    duration: 6000,
                    id: id,
                    start: e.time * 1000,
                    txt: e.text,
                    style: {
                      color: e.color,
                      fontSize: e.size + "px",
                    },
                    mode: e.mode == 1 ? "top" : "scroll",
                  };
                });
                return new xgplayer(src);
              }),
        },
      };
    },
  };
</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
49
50

# FLV

<ClientOnly>
  <Xgplayer :src="xgFlv" />
</ClientOnly>

<script>
  export default {
    data() {
      return {
        xgFlv: {
          url: "/assets/video/s_720.flv",
          type: "flv",
          thumbnail: {
            pic_num: 100,
            width: 160,
            height: 90,
            col: 1,
            row: 100,
            urls: ["/assets/video/thumbnails.jpg"],
            isShowCoverPreview: false,
          },
        },
      };
    },
  };
</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

# HLS

<ClientOnly>
  <Xgplayer :src="xgHls" />
</ClientOnly>

<script>
  export default {
    data() {
      return {
        xgHls: {
          url: "/assets/video/dash/master.m3u8",
          type: "hls",
          thumbnail: {
            pic_num: 100,
            width: 160,
            height: 90,
            col: 1,
            row: 100,
            urls: ["/assets/video/thumbnails.jpg"],
            isShowCoverPreview: false,
          },
        },
      };
    },
  };
</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

# ShakaDash

<ClientOnly>
  <Xgplayer :src="xgShaka" />
</ClientOnly>

<script>
  export default {
    data() {
      return {
        xgShaka: {
          url: "/assets/video/dash/stream.mpd",
          type: "shaka",
          thumbnail: {
            pic_num: 100,
            width: 160,
            height: 90,
            col: 1,
            row: 100,
            urls: ["/assets/video/thumbnails.jpg"],
            isShowCoverPreview: false,
          },
        },
      };
    },
  };
</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

# 音乐播放器

<ClientOnly>
  <Xgplayer :src="xgMusic" />
</ClientOnly>

<script>
  export default {
    data() {
      return {
        xgMusic: {
          url: [
            {
              src: "/assets/audio/年轻人要热爱祖国.mp3",
              name: "年轻人要热爱祖国",
              vid: "001",
              poster:
                "https://sm.sm9.top/api/music?server=Tencent&type=pic&id=001gv6xI4BNGiP",
            },
          ],
          height: 35,
          type: "music",
        },
      };
    },
  };
</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

# 配置

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

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

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

或

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

1
2
3
4
5
6
7
8
9
10

#开源项目 #vuepress-plugin-smplayer

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

← 西瓜视频 FAQ→