自定义插件如何使用？文档说明不全

[tianduo123]

需求：我想在播放器控制条上加个自定义按钮，是不是需要自定义插件？我根据文档写的插件，但是并没有在控制条中显示，文档中也没有明确说明，希望作者回复一下
以下是自定义的插件js
`import Player from 'xgplayer';

let closePlugin = function(player){
console.log('这是自定义插件逻辑')
}
Player.install('closePlugin',closePlugin)`

[iammsf]

巧了，我也在这块儿没搞懂。。。在这里蹲一个大佬。

[huyu456]

我的方式是参照官方的例子来使用，比如download，源码地址：https://github.com/bytedance/xgplayer/blob/master/packages/xgplayer/src/skin/controls/download.js
copy代码后，在其中添加自己的逻辑，

import { createDom } from 'xgplayer/src/utils/util'
import { xgPlayerDownloadSvg } from './config'
import 'xgplayer/src/skin/style/controls/download.scss'

export const customDownload = function (player) {
  // 插件逻辑
  if (!player.config.custom_download) {
    return
  }
  const btn = createDom(
    'xg-download',
    `<xg-icon class="xgplayer-icon">${xgPlayerDownloadSvg}</xg-icon>`,
    {},
    'xgplayer-download'
  )
  const tipsText = player.lang.DOWNLOAD_TIPS
  const tips = createDom(
    'xg-tips',
    `<span class="xgplayer-tip-download">${tipsText}</span>`,
    {},
    'xgplayer-tips'
  )
  btn.appendChild(tips)
  player.once('ready', () => {
    player.controls.appendChild(btn)
  })
  const list = ['click', 'touchend']
  list.forEach((item) => {
    btn.addEventListener(item, function (e) {
      e.preventDefault()
      e.stopPropagation()
    })
  })
}

import Player, { IPlayerOptions } from 'xgplayer'
import { customDownload } from '@/utils/plugins'

Player.install('customDownload', customDownload) // 安装插件

可能存在图标无法显示的问题，我将svg直接当作字符串插入到代码中，就可以显示了

[huyu456]

@iammsf

[iammsf]

我的方式是参照官方的例子来使用，比如download，源码地址：https://github.com/bytedance/xgplayer/blob/master/packages/xgplayer/src/skin/controls/download.js copy代码后，在其中添加自己的逻辑，

import { createDom } from 'xgplayer/src/utils/util'
import { xgPlayerDownloadSvg } from './config'
import 'xgplayer/src/skin/style/controls/download.scss'

export const customDownload = function (player) {
  // 插件逻辑
  if (!player.config.custom_download) {
    return
  }
  const btn = createDom(
    'xg-download',
    `<xg-icon class="xgplayer-icon">${xgPlayerDownloadSvg}</xg-icon>`,
    {},
    'xgplayer-download'
  )
  const tipsText = player.lang.DOWNLOAD_TIPS
  const tips = createDom(
    'xg-tips',
    `<span class="xgplayer-tip-download">${tipsText}</span>`,
    {},
    'xgplayer-tips'
  )
  btn.appendChild(tips)
  player.once('ready', () => {
    player.controls.appendChild(btn)
  })
  const list = ['click', 'touchend']
  list.forEach((item) => {
    btn.addEventListener(item, function (e) {
      e.preventDefault()
      e.stopPropagation()
    })
  })
}

import Player, { IPlayerOptions } from 'xgplayer'
import { customDownload } from '@/utils/plugins'

Player.install('customDownload', customDownload) // 安装插件

可能存在图标无法显示的问题，我将svg直接当作字符串插入到代码中，就可以显示了

感谢解答。但是我是nodejs白痴，完全不知道npm下载下来的包要怎么用。。。我自己网上查，他们说要用webpack把文件打包成浏览器可以执行的js文件，我看到下载下来的文件里面是有webpack.json的，就尝试了一下，结果报错了。
然后我改了示例里面的代码，去掉前面的import部分（我是选用cdn导入的方式）
let customPlugin = function(player){
console.log('plugin test')
}
Player.install('自定义插件',customPlugin)
然后在代码里加上刚刚写的插件
<script type="text/javascript">
let player=new Player({
id: 'mse',
autoplay: false,
volume: 0.3,
url:'//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
poster: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
playsinline: true,
customPlugin
});
</script>
我发现在播放器初始化的时候就执行控制台输出了，但是播放器界面并没有出现新的插件按钮。我是需要在在自定义插件的代码部分新建DOM还是要怎么弄才行呢

[huyu456]

@iammsf 我的建议是customPlugin就是一个函数，你依然需要使用按如下方式来安装插件，在browser环境中，你可以尝试在onload事件下，使用player（let player）注册，player应该是包含install方法的，你可以自己看看

Player.install('customDownload', customDownload) // 安装插件

[iammsf]

@iammsf 我的建议是customPlugin就是一个函数，你依然需要使用按如下方式来安装插件，在browser环境中，你可以尝试在onload事件下，使用player（let player）注册，player应该是包含install方法的，你可以自己看看

Player.install('customDownload', customDownload) // 安装插件

好的，感谢指点