【踩坑总结】xgplayer 西瓜🍉播放器 自定义样式

🍉西瓜播放器 修改样式

github demo地址

1.vue.config 配置loader 正确解析 svg

const webpack = require('webpack')
module.exports = {
	//vuecli@3.x版本把基本的配置文件都封装到了./node_modules/@vue/cli-sevice/lib/config下
	lintOnSave: false,
	publicPath: './',
	 chainWebpack: config => {
	        const svgRule = config.module.rule('svg')
	        // 清除已有的所有 loader。
	        // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
	        svgRule.uses.clear()
	        // 添加要替换的 loader
	        svgRule
	            .use('raw-loader')
	            .loader('raw-loader')
	    },
	devServer: {
		
	},
	
}

2.npx xgplayer eject [targetDir] [skinName]

踩坑 不要直接跑上面的 ps:问了🍉播放器大佬 告诉我的 感谢大佬🙇‍ (大家可以去他们的官方qq群问群主 群主人贼好的👍👍)

[skinName] 别直接写[skinName] 换个名字
比如 npx xgplayer eject ./ custom

3.引入

1.生成文件

2.引入

import Player from "xgplayer";
import "../../xgplayer-style/skin/index.js";

3.顺利的话播放器就出来了(外部网页加了点样式)

4.更改默认样式

举个例子（更改播放按钮）

修改前 修改后

1.

2.替换（ps 注意改svg width 和 height）

3替换成功

4.播放键背景去除（在下图文件夹下）

修改对应的css

当然你也可以加个动效

业务常用逻辑(大体一看)

<template>
  <div class="home">
    <div class="mse" id="mse"></div>
    <div class="btn-box">
      <button @click="changeUrl">切换视频播放地址</button>
    </div>
  </div>
</template>

<script>
import Player from "xgplayer";
import "../../xgplayer-style/skin/index.js";
export default {
  name: "Home",
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    this.initXgPlayer();
  },
  methods: {
    initXgPlayer() {
      this.player = new Player({
        id: "mse",
        url: "https://mov.bn.netease.com/open-movie/nos/mp4/2021/05/30/SGA9A3CJ7_shd.mp4",
      });
      //注册事件 更多事件看官网
      this.player.once("ready", () => {
        console.log("ready");
      });
      //改变进度条
      this.player.on("seeking", () => {
        console.log("当前进度", this.player.currentTime);
        //可以调接口保存进度 注意防抖哈
      });
    },
    //切换播放地址
    async changeUrl() {
      //加个loading 优化体验
      Player.util.removeClass(this.player.root, "xgplayer-ended");
      Player.util.addClass(this.player.root, "xgplayer-loading");
      let url = await this.getUrl();
      if (!this.player.hasStart) {
        this.player.start(url);
      } else {
        this.player.src = url;
      }
      this.player.play();
    },
    //模拟 接口地址
    getUrl() {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(
            "https://mov.bn.netease.com/open-movie/nos/mp4/2019/06/25/SEHJ25AHK_shd.mp4"
          );
        }, 3000);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-width: 100vw;
  background: #bc763c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .mse {
    width: 576px;
    height: 324px;
    background: #895b8a;
    box-shadow: 0px 0px 16px 1px #333;
    border-radius: 6px;
    overflow: hidden;
  }

  .btn-box {
    margin-top: 20px;
  }
}
</style>

其他问题

1. 官方作者 @xin 确实不错 有问必答 感谢🙇‍🙇‍🙇‍
2. 有黑边 请确认视频比例与你设置的盒子比例是否一致
3. 自定义按钮在内测 下个版本可能支持吧