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

keyboard

PC shortcut key plugin。SourceCode

pluginName: keyboard

Note

The plug-in only takes effect on the PC side

config

seekStep

  • @type: Number | function
  • default: 10
  • @desc: The time of each operation of the fast forward/Unit is s,default value is 10。 If the type is function, it must return an integer

disableBodyTrigger

  • @type: Boolean
  • default: false
  • @desc: Disable global monitoring When there are multiple player instances on the page, set to true to avoid shortcut keys triggering the behavior of all instances

keyCodeMap

  • @type: object
  • default: 如下
  • @desc: Shortcut key mapping list

The predefined shortcut keys are as follows：

{
  'space': {              // Space key, play/pause switch
    code: 32,             // keycode
    action: 'playPause',  // handle, playPause is the api name in the plug-in
    disable: false        // Whether to disable
  },
  'up': {                 // Up key, volume up
    code: 38,
    action: 'upVolume',
    disable: false
  },
  'down': {               // Down key, volume down
    code: 40,
    action: 'downVolume',
    disable: false
  },
  'left': {               // Left key, seek backward
    code: 37,
    action: 'seekBack',
    disable: false
  },
  'right': {              // Right key, seek forward
    code: 39,
    action: 'seek',
    disable: false
  },
  'esc': {               // Esc key, exit fullscreen or cssfullscreen
    code: 27,
    action: 'exitFullscreen',
    disable: false
  }
}

You can configure to disable or modify the default shortcut keys, and you can also add custom shortcut keys，E.g：

const playerConfig = {
  keyboard: {
    keyCodeMap: {
      // Disable the space shortcut key to switch play/pause
      'space': {
        disable: true
      },
      // Modify the upward shortcut key behavior
      'up': {
        action: function () {
          console.log('当前是点击了快捷键38')
        }
      },
      // Modify the shortcut key for triggering to be changed to l key
      'left': {
        keyCode: 76
      },
      // Customize a shortcut key operation
      'custom': {
        keyCode: 13,
        action: () => { // Execute this function when the shortcut key is triggered
          console.log('This is a custom shortcut key operation, click the enter key')
        }
      },
      'custom2': {
        keyCode: 14,
        action: 'customAction2' // There is no implementation of api witch named customAction2 inside the plugin，need to listen to events and deliver them to implement specific functions
      },
    }
  }
}

disable

  • @desc: Whether to disable the plugin

  • @type: {Boolean}, 默认值false

    This configuration item can be disabled through playerConfig.keyShortcut，The default value is true, E.g:

    const playerConfig = {
  keyShortcut: false, //Disable all shortcut keys
  ...
}

isIgnoreUserActive

  • @desc: Whether to ignore user activation status
  • @type: {Boolean}, default false

When there are multiple player instances on the same page, the user needs to activate the player instance. When this configuration item is false and player.isUserActive is false, the shortcut key will not take effect

event

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

When all defined shortcut keys are triggered，will emit event Events.SHORTCUT, we can use the following methods to implement custom shortcut key functions,E.g:

import Player, { Events } from 'xgplayer'

const playerConfig = {
  keyboard: {
    keyCodeMap: {
      'custom': {
        keyCode: 187,  // Upper right corner+
        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
  }
})

← loading →