西瓜播放器 HTML5 video video.js 播放器 HTML5播放器 mp4 hls hls.js flv flv.js dash dash.js 无缝切换

Configure icons of built-in plugins

Icon list

NameDescriptionPlugin
playPlay iconplay
pausePause iconplay
playNextPlay next iconplaynext
replayReplay iconreplay
rotateRotate iconrotate
startPlay(Center of playing erea) start play iconstart
startPause(Center of playing erea) start play iconstart
volumeSmallVolumn icon (small sound)volume
volumeLargeVolumn icon (large sound)volume
volumeMutedVolumn icon (muted)volume
openDanmuBarrage icon (open)danmu
closeDanmuBarrage icon (closed)danmu
downloadDownload icondownload
screenshotIconScreenshot iconscreenshot
fullscreenFullscreen iconfullscreen
exitFullscreenExit fullscreen iconfullscreen
screenBackExit fullscreen icon for mobile devicesfullscreen
cssFullscreenCSS-fullscreen iconcssfullscreen
exitCssFullscreenExit CSS-fullscreen iconcssfullscreen
pipIconPicture-in-picture iconpip
pipIconExitExit Picture-in-picture iconpip
loadingIconLoading iconloading

Customize icon by player.config

import Player, {Util} from 'xgplayer'
const playerConfig = {
  ...,
  icons: {
    play: () => {
      const dom = Util.createDom('div', '<img src="./start"/>', {}, 'customclass')
      return dom
    },
    pause: `<div class='customclass'><img src="./start"/></div>`
  }
}