diff --git a/packages/docs/src/pages/plugins/playlist.mdx b/packages/docs/src/pages/plugins/playlist.mdx
index b76b9c84..1ada1a2e 100644
--- a/packages/docs/src/pages/plugins/playlist.mdx
+++ b/packages/docs/src/pages/plugins/playlist.mdx
@@ -6,8 +6,16 @@
 npm i @oplayer/ui @oplayer/plugins
 ```
 
+```html
+<script src="https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/playlist.min.js"></script>
+
+<script>
+  Player.make('#player') .use([new OPlaylist(...)]).create()
+</script>
+```
+
 ```jsx
-import Player from '@oplayer/react'
+import Player from '@oplayer/core'
 import ui from '@oplayer/ui'
 import { PlaylistPlugin } from '@oplayer/plugins'
 
@@ -74,56 +82,59 @@ Player.make('#player')
   ])
   .create()
 ```
-##  methods
+
+## methods
 
 ```ts
 export default class PlaylistPlugin implements PlayerPlugin {
-    key: string;
-    name: string;
-    version: string;
-    static m3u8Parser: any;
-    player: Player<Ctx>;
-    currentIndex?: number;
-    $root: HTMLDivElement;
-    options: PartialRequired<PlaylistOptions, 'autoNext' | 'autoHide'>;
-    constructor(options?: PlaylistOptions);
-    apply(player: Player): this | undefined;
-    _init(): Promise<void>;
-    get isWaiting(): boolean;
-    changeSource(idx: number): Promise<void>;
-    changeSourceList(sources: PlaylistSource[]): void;
-    next(): void;
-    previous(): void;
-    showUI(): void;
-    hideUI(): void;
-    render(): void;
-    renderList(sources: PlaylistSource[]): void;
-    destroy(): void;
+  player: Player<Ctx>
+  currentIndex?: number
+  $root: HTMLDivElement
+  constructor(options?: PlaylistOptions)
+  get isWaiting(): boolean
+  changeSource(idx: number): Promise<void>
+  changeSourceList(sources: PlaylistSource[]): void
+  next(): void
+  previous(): void
+  showUI(): void
+  hideUI(): void
+  render(): void
+  destroy(): void
 }
 
 interface Segment {
-    uri: string;
-    timeline: number;
-    title: string;
+  uri: string
+  timeline: number
+  title: string
 }
 
 export interface PlaylistOptions {
-    sources: PlaylistSource[];
-    customFetcher?: (source: PlaylistSource, index: number) => Promise<PlaylistSource> | PlaylistSource;
-    autoNext?: boolean;
-    autoHide?: boolean;
-    initialIndex?: number;
-    m3uList?: {
-        sourceFormat?: (info: Segment) => Source;
-    } | true;
+  sources: PlaylistSource[]
+  customFetcher?: (source: PlaylistSource, index: number) => Promise<PlaylistSource> | PlaylistSource
+  autoNext?: boolean
+  autoHide?: boolean
+  initialIndex?: number
+  m3uList?:
+    | {
+        sourceFormat?: (info: Segment) => Source
+      }
+    | true
 }
 
 export interface PlaylistSource extends Omit<Source, 'src'> {
-    src?: string;
-    duration?: string;
-    subtitles?: SubtitleSource[];
-    thumbnails?: Thumbnails;
-    highlights?: Highlight[];
+  src?: string
+  duration?: string
+  subtitles?: SubtitleSource[]
+  thumbnails?: Thumbnails
+  highlights?: Highlight[]
 }
-
 ```
+
+## Event
+
+- `playlistsourcechange`
+- `playlistsourceerror`
+
+## Keyboard
+
+- `l`: toggle list slide
diff --git a/packages/plugins/src/playlist.ts b/packages/plugins/src/playlist.ts
index 17f6067e..5f4e73e4 100644
--- a/packages/plugins/src/playlist.ts
+++ b/packages/plugins/src/playlist.ts
@@ -75,7 +75,7 @@ export default class PlaylistPlugin implements PlayerPlugin {
           this.next()
         })
       }
-      this.player.context.ui.keyboard.register({
+      this.player.context.ui.keyboard?.register({
         l: () => {
           this.$root.classList.toggle('active')
         }
diff --git a/packages/ui/src/functions/keyboard.ts b/packages/ui/src/functions/keyboard.ts
index d6516cae..b0707136 100644
--- a/packages/ui/src/functions/keyboard.ts
+++ b/packages/ui/src/functions/keyboard.ts
@@ -64,16 +64,11 @@ const KEY_FN: Record<string, (player: Player) => void> = {
 export default function (it: UIInterface) {
   const { player, config } = it
 
-  if (typeof config.keyboard == 'undefined') {
-    config.keyboard = { focused: true }
-  }
-
   function keydown(e: KeyboardEvent) {
     if (
       document.activeElement?.tagName == 'INPUT' ||
       document.activeElement?.tagName == 'TEXTAREA' ||
       document.activeElement?.getAttribute('contenteditable') ||
-      (!config.keyboard!.global && !config.keyboard!.focused) ||
       (config.keyboard!.focused && !isFocused(player)) ||
       e.altKey ||
       e.ctrlKey ||
@@ -91,20 +86,21 @@ export default function (it: UIInterface) {
     }
   }
 
-  it.keyboard.register = function register(payload: any) {
-    for (const key in payload) {
-      if (Object.prototype.hasOwnProperty.call(payload, key)) {
-        KEY_FN[key] = payload[key]
+  it.keyboard = {
+    register: function register(payload: any) {
+      for (const key in payload) {
+        if (Object.prototype.hasOwnProperty.call(payload, key)) {
+          KEY_FN[key] = payload[key]
+        }
       }
+    },
+    unregister: function unregister(payload: string[]) {
+      payload.forEach((k) => {
+        delete KEY_FN[k]
+      })
     }
   }
 
-  it.keyboard.unregister = function unregister(payload: string[]) {
-    payload.forEach((k) => {
-      delete KEY_FN[k]
-    })
-  }
-
   document.addEventListener('keydown', keydown)
   player.on('destroy', () => {
     document.removeEventListener('keydown', keydown)
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 58b8be06..6fdebd0d 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -32,8 +32,9 @@ const defaultConfig: UiConfig = {
   autoFocus: true,
   forceLandscapeOnFullscreen: true,
 
-  showControls: 'always',
   settings: ['loop'],
+  showControls: 'always',
+  keyboard: { focused: true },
   theme: { primaryColor: '#6668ab' },
   speeds: ['2.0', '1.5', '1.25', '1.0', '0.75', '0.5'],
   ctrlHideBehavior: 'hover'
@@ -106,6 +107,9 @@ class UI implements UIInterface {
 
   constructor(public config: UiConfig) {
     this.config = mergeDeep({}, defaultConfig, config)
+    if (this.config.keyboard?.global) {
+      this.config.keyboard!.focused = false
+    }
   }
 
   apply(player: Player) {
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index 5204bf5a..ee51025a 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -220,7 +220,7 @@ export interface UIInterface extends PlayerPlugin {
       | 'left-bottom'
   ) => void
 
-  keyboard: {
+  keyboard?: {
     register: (payload: Record<string, (e: any) => void>) => void
     unregister: (keys: string[]) => void
   }