keyboard

pc端快捷键插件。源码

pluginName: keyboard

Note

该插件只在pc端注册

config

seekStep

@type: Number | function
default: 10
@desc:快进/快退快捷键每次操作的时间，单位为s,默认值为10，即每次点击相应的快捷键，快进快退10s, function必须返回整数

disableBodyTrigger

@type: Boolean
default: false
@desc: 禁用全局监听, 页面中有多个播放器实例的时候，设置为true, 避免快捷键触发所有实例的行为

keyCodeMap

@type: object
default: 如下
@desc:快捷键映射列表，key值为快捷键命名，value格式为具体的快捷键索引配置

预定义的快捷键如下：

/**
 * 以下配置中的action值
 * playPause 、exitFullscreen、upVolume、downVolume、seekBack、seek、exitFullscreen
 * 在插件中都有相应的接口实现，如果想要自定义快捷键行为，不要使用这几个action名称
 */
{
  'space': {              //空格键，播放/暂停切换
    code: 32,             //对应快捷键索引
    action: 'playPause',  //具体触发的业务操作，如果为字符串，则执行keyborad对应接口
    disable: false        // 是否禁用
  },
  'up': {                 // 向上键，上调音量
    code: 38,
    action: 'upVolume',
    disable: false
  },
  'down': {               // 向下键，下调音量
    code: 40,
    action: 'downVolume',
    disable: false
  },
  'left': {               // 向左键，后退
    code: 37,
    action: 'seekBack',
    disable: false
  },
  'right': {              // 向右键，快进
    code: 39,
    action: 'seek',
    disable: false
  },
  'esc': {               // esc键，退出全屏
    code: 27,
    action: 'exitFullscreen',
    disable: false
  }
}

可根据配置禁用或者修改默认快捷键，也可以添加自定义快捷键，例如下：

//禁用空格键切换播放/暂停
const playerConfig = {
  keyboard: {
    keyCodeMap: {
      //禁用空格键切换播放/暂停
      'space': {
        disable: true
      },
      // 修改向上快捷键行为
      'up': {
        action: function () {
          console.log('当前是点击了快捷键38')
        }
      },
      // 修改快进行为触发的快捷键改为l键
      'left': {
        keyCode: 76
      },
      // 自定义一个快捷键操作
      'custom': {
        keyCode: 13,
        action: () => { //快捷键触发的时候执行该函数
          console.log('这是一个自定义快捷键操作，点击的是回车键')
        }
      },
      'custom2': {
        keyCode: 14,
        action: 'customAction2' // 插件内部没有customAction2的实现，需要结合事件下发自己实现具体功能
      },
    }
  }
}

disable

@desc:是否禁用插件
@type: {Boolean}, 默认值false
该配置项可以通过playerConfig.keyShortcut控制是否禁用，默认值为true, 例如：
```
const playerConfig = {
  keyShortcut: false, //禁用所有快捷键
  ...
}
```

isIgnoreUserActive

@desc:是否忽略用户激活状态
@type: {Boolean}, 默认值true

当同一个页面有多个实例存在的时候，需要用户激活播放器实例，当该配置项为true的时候，当player.isUserActive为false的时候，快捷键将不生效

event

@3.0.0-alpha.92-2 之后支持

所有定义的快捷键触发的时候，都会下发事件Events.SHORTCUT, 在不方便通过配置实现自定义快捷键功能的时候可以通过以下方式来实现自定义快捷键

import Player, { Events } from 'xgplayer'

const playerConfig = {
  keyboard: {
    keyCodeMap: {
      'custom': {
        keyCode: 187,  // 右上角+
        action: 'customAction2'
      },
    }
  }
  ...
}
const player = new Player(playerConfig)

player.on(Events.SHORTCUT, (data) => {
  if (data.action === 'customAction2') {
    console.log(' this is customize shortcut key behavior')
    // TODO
  }
})

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

# keyboard

# config

# seekStep

# disableBodyTrigger

# keyCodeMap

# disable

# isIgnoreUserActive

# event