西瓜播放器自定义样式指南

当西瓜播放器的默认样式不满足 UI 的要求，我们就要对它的样式进行自定义。

比如，当你把西瓜播放器接入到项目中时，它默认的播放按钮是长这样的：

修改前.png

但是咱们 UI 上的播放按钮可能是长这样的：

修改后.png

接下来就教你如何自定义西瓜播放器的样式。

获取默认样式

首先，根据官方指南，把它的所有样式注入到你的项目中来：

$ npx xgplayer eject [targetDir] [skinName]
# 示例，将文件生成到当然目录的 assets/xgplayer/ 中
$ npx xgplayer eject assets/xgplayer xg-player
复制代码

[skinName]会影响到生成的样式名称，如图所示：

命令执行完毕后，你就会在 assets/xgplayer/ 目录中看到 .xgplayer/ 目录，所有的默认样式都存放在这里面了。

调整原来的配置

在 .xgplayer/skin/ 目录中，你会发现一个 index.js 文件，文件里的第一行把完整包给引入了进来：

import Player from 'xgplayer';
...//
复制代码

因为完整包很大，我们只需要一个核心包就可以了，所以把它改成：

import Player from 'xgplayer/dist/core_player';
...//
复制代码

然后我们在文件最底部加上一个导出：

...//
export default Player;
复制代码

意味着，我们原来在项目中引用的那个西瓜播放器就要改成引用这个文件了，示例：

...//
import XGPlayer from '../../../assets/xgplayer/.xgplayer/skin/index';
...//
复制代码

然后如果原来有用到插件，比如：

...//
import XGPlayer from 'xgplayer/dist/core_player';
import poster from 'xgplayer/dist/controls/poster';
import progress from 'xgplayer/dist/controls/progress';
import timeCount from 'xgplayer/dist/controls/time';

player = new XGPlayer({
    id: 'xgplayer',
    poster: '',
    url: '',
    // 配置插件的地方
    controlPlugins: [
      poster,
      progress,
      timeCount
    ],
});
复制代码

要把这些插件都删掉，因为咱们使用了自定义样式后，这些插件配了也不起效。

开始自定义样式

先看一下我的 skin/index.js 文件里面现在是什么样：

import Player from 'xgplayer/dist/core_player';

// import I18n from './controls/i18n.js'
import Enter from './controls/enter.js'
// import Play from './controls/play.js'
import Start from './controls/start.js'
import Poster from './controls/poster.js'
// import Flex from './controls/flex.js'
// import Fullscreen from './controls/fullscreen.js'
// import CssFullscreen from './controls/cssFullscreen.js'
// import Volume from './controls/volume.js'
// import Definition from './controls/definition.js'
import Loading from './controls/loading.js'
import Progress from './controls/progress.js'
import Time from './controls/time.js'
// import Replay from './controls/replay.js'
// import PlaybackRate from './controls/playbackRate.js'
// import LocalPreview from './controls/localPreview.js'
// import Download from './controls/download.js'
// import Danmu from './controls/danmu.js'
// import Pip from './controls/pip.js'
// import Miniplayer from './controls/miniplayer.js'
// import PlayNext from './controls/playNext.js'
// import Rotate from './controls/rotate.js'
// import Reload from './controls/reload.js'
// import ScreenShot from './controls/screenShot.js'
// import NativeTextTrack from './controls/nativeTextTrack.js'
// import TextTrack from './controls/textTrack.js'
// import ErrorControl from './controls/error.js'
// import MemoryPlay from './controls/memoryPlay.js'
// import Airplay from './controls/airplay.js'

Player.useAll([
    // I18n,
    Enter,
    // Play,
    Start,
    Poster,
    // Flex,
    // Fullscreen,
    // CssFullscreen,
    // Volume,
    // Definition,
    Loading,
    Progress,
    Time,
    // Replay,
    // PlaybackRate,
    // LocalPreview,
    // Download,
    // Danmu,
    // Pip,
    // Miniplayer,
    // PlayNext,
    // Rotate,
    // Reload,
    // ScreenShot,
    // NativeTextTrack,
    // TextTrack,
    // ErrorControl,
    // MemoryPlay,
    // Airplay
])
import "./style/index.scss";
Player.install("xgplayer-skin-xg-player", () => {});

export default Player;
复制代码

可以看到我把很多样式都注释掉了，因为我项目中不需要那些东西。我只需要封面图、进度条、时间器这些，然后再想调整一下中间大播放按钮的样式，对应的是 Start 这个样式。

例子讲解：改 Start 样式

接下来开始改 Start 样式，进入到 ./controls/start.js 文件中，把 ${StartPlayIcon}改成 UI 给的图，于是那里的代码就变成：

<div class="xgplayer-icon-play"><img width="40px" height="40px" src="https://cdn.xgplayer.com/[email protected]"></div>
复制代码

UI 给的播放按钮宽高为 40 像素，我们再去 style/controls/start.scss 这个文件里面把它外层的宽高也调整一下：

因为点击播放按钮的时候在 ios 上会有一个浅色背景，需要禁用掉，所以最后加了这个样式。

回到页面中，你就会看到中间的播放按钮已经改成 UI 给的图了。

为了配合播放按钮的尺寸大小，我又调整了 Enter 的样式，它就是在点击播放按钮的时候出现的那个加载的动画：

如果还有其它要调整的样式，你就依葫芦画瓢吭哧吭哧改就可以了。

如果你喜欢我写的文章，就点个赞支持一下吧。

如果文章有误，或者有不明白的地方，务必在评论区里留言。