西瓜播放器自定义样式指南
当西瓜播放器的默认样式不满足 UI 的要求,我们就要对它的样式进行自定义。
比如,当你把西瓜播放器接入到项目中时,它默认的播放按钮是长这样的:
但是咱们 UI 上的播放按钮可能是长这样的:
接下来就教你如何自定义西瓜播放器的样式。
获取默认样式
首先,根据官方指南,把它的所有样式注入到你的项目中来:
$ 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 的样式,它就是在点击播放按钮的时候出现的那个加载的动画:
如果还有其它要调整的样式,你就依葫芦画瓢吭哧吭哧改就可以了。
如果你喜欢我写的文章,就点个赞支持一下吧。
如果文章有误,或者有不明白的地方,务必在评论区里留言。