diff --git a/packages/core/README.md b/packages/core/README.md
index 4d334cf0..d1b0ba50 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -10,7 +10,7 @@
 ## Basic
 
 ```js
-const player = Player.make('#player', {
+const player = OPlayer.make('#player', {
   source: {
     title: '君の名は',
     src: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/君の名は.mp4',
diff --git a/packages/core/package.json b/packages/core/package.json
index c0a59b6f..54d419e1 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "main": "./dist/index.es.js",
   "types": "./dist/src/index.d.ts",
+  "browser": "./dist/index.min.js",
   "sideEffects": false,
   "author": "shiyiya",
   "homepage": "https://github.com/shiyiya/oplayer",
diff --git a/packages/docs/src/pages/docs/player-configuration.mdx b/packages/docs/src/pages/docs/player-configuration.mdx
index f978a6fc..1f9c966b 100644
--- a/packages/docs/src/pages/docs/player-configuration.mdx
+++ b/packages/docs/src/pages/docs/player-configuration.mdx
@@ -8,7 +8,7 @@ import { Callout } from 'nextra-theme-docs'
 </Callout>
 
 ```js
-Player.make(/* container */ '#app', {
+OPlayer.make(/* container */ '#app', {
   /** Configuration **/
   /** Here's where to fill in the configuration **/
   muted: true
diff --git a/packages/docs/src/pages/docs/plugins/airplay.mdx b/packages/docs/src/pages/docs/plugins/airplay.mdx
index 3e612e2c..b5bbf339 100644
--- a/packages/docs/src/pages/docs/plugins/airplay.mdx
+++ b/packages/docs/src/pages/docs/plugins/airplay.mdx
@@ -7,13 +7,13 @@ npm i @oplayer/plugins
 ```js
 import { AirPlay } from '@oplayer/plugins'
 
-Player.make('#oplayer').use([new AirPlay()]).create()
+OPlayer.make('#oplayer').use([new AirPlay()]).create()
 ```
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/airplay.min.js"></script>
 
 <script>
-  Player.make('#oplayer').use([new OAirPlay()]).create()
+  OPlayer.make('#oplayer').use([new OAirPlay()]).create()
 </script>
 ```
diff --git a/packages/docs/src/pages/docs/plugins/chromecast.mdx b/packages/docs/src/pages/docs/plugins/chromecast.mdx
index 1d82c70b..30685c56 100644
--- a/packages/docs/src/pages/docs/plugins/chromecast.mdx
+++ b/packages/docs/src/pages/docs/plugins/chromecast.mdx
@@ -7,13 +7,13 @@ npm i @oplayer/plugins
 ```js
 import { Chromecast } from '@oplayer/plugins'
 
-Player.make('#oplayer').use([new Chromecast()]).create()
+OPlayer.make('#oplayer').use([new Chromecast()]).create()
 ```
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/chromecast.min.js"></script>
 
 <script>
-  Player.make('#oplayer').use([new OChromecast()]).create()
+  OPlayer.make('#oplayer').use([new OChromecast()]).create()
 </script>
 ```
diff --git a/packages/docs/src/pages/docs/plugins/playlist.mdx b/packages/docs/src/pages/docs/plugins/playlist.mdx
index 71ad8526..bd0f7468 100644
--- a/packages/docs/src/pages/docs/plugins/playlist.mdx
+++ b/packages/docs/src/pages/docs/plugins/playlist.mdx
@@ -10,7 +10,7 @@ npm i @oplayer/ui @oplayer/plugins
 <script src="https://cdn.jsdelivr.net/npm/@oplayer/plugins@latest/dist/playlist.min.js"></script>
 
 <script>
-  Player.make('#player') .use([new OPlaylist(...)]).create()
+  OPlayer.make('#player') .use([new OPlaylist(...)]).create()
 </script>
 ```
 
@@ -19,7 +19,7 @@ import Player from '@oplayer/core'
 import ui from '@oplayer/ui'
 import { Playlist } from '@oplayer/plugins'
 
-Player.make('#player')
+OPlayer.make('#player')
   .use([
     ui(),
     new Playlist({
diff --git a/packages/docs/src/pages/docs/plugins/vtt-thumbnails.mdx b/packages/docs/src/pages/docs/plugins/vtt-thumbnails.mdx
index 0f6f13ec..76e8b7ee 100644
--- a/packages/docs/src/pages/docs/plugins/vtt-thumbnails.mdx
+++ b/packages/docs/src/pages/docs/plugins/vtt-thumbnails.mdx
@@ -11,5 +11,5 @@ import Player from '@oplayer/react'
 import ui from '@oplayer/ui'
 import { vttThumbnails } from '@oplayer/plugins'
 
-Player.make('#player').use([ui(), vttThumbnails({ src:'your-path' })]).create()
+OPlayer.make('#player').use([ui(), vttThumbnails({ src:'your-path' })]).create()
 ```
diff --git a/packages/docs/src/pages/docs/start.mdx b/packages/docs/src/pages/docs/start.mdx
index 480bfea5..8d489a92 100644
--- a/packages/docs/src/pages/docs/start.mdx
+++ b/packages/docs/src/pages/docs/start.mdx
@@ -10,11 +10,11 @@ npm i @oplayer/core @oplayer/ui @oplayer/hls hls.js
 ```
 
 ```js filename="app.js"
-import Player from '@oplayer/core'
+import OPlayer from '@oplayer/core'
 import OUI from '@oplayer/ui'
 import OHls from '@oplayer/hls'
 
-Player.make('#oplayer', {
+OPlayer.make('#oplayer', {
   source: {
     title: '君の名は',
     src: 'https://cdn.jsdelivr.net/gh/shiyiya/QI-ABSL@master/o/君の名は.mp4',
diff --git a/packages/docs/src/pages/docs/ui.mdx b/packages/docs/src/pages/docs/ui.mdx
index 2f59032e..061b81d4 100644
--- a/packages/docs/src/pages/docs/ui.mdx
+++ b/packages/docs/src/pages/docs/ui.mdx
@@ -25,7 +25,7 @@ npm i @oplayer/ui
 ## Basic
 
 ```js
-const player = Player.make('#player', {
+const player = OPlayer.make('#player', {
   source: {
     title: '君の名は',
     src: 'https://oplayer.vercel.app/君の名は.mp4',
@@ -82,7 +82,7 @@ OUI({
 ## How to display title ?
 
 ```js
-const player = Player.make('#player', {
+const player = OPlayer.make('#player', {
   source: {
     title: '君の名は' // required
     // ...
diff --git a/packages/ui/package.json b/packages/ui/package.json
index a6c638f0..10e5060a 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "main": "./dist/index.es.js",
   "types": "./dist/src/index.d.ts",
+  "browser": "./dist/index.min.js",
   "sideEffects": false,
   "author": "shiyiya",
   "homepage": "https://github.com/shiyiya/oplayer",
diff --git a/packages/ui/src/components/Setting.ts b/packages/ui/src/components/Setting.ts
index 00cd16b8..442e6719 100644
--- a/packages/ui/src/components/Setting.ts
+++ b/packages/ui/src/components/Setting.ts
@@ -216,7 +216,19 @@ function createPanel(
   }
 
   for (let i = 0; i < setting.length; i++) {
-    const { name, type, key, children, icon, default: selected, onChange, max, min, step } = setting[i]!
+    const {
+      name,
+      type,
+      key,
+      children,
+      icon,
+      default: selected,
+      onChange,
+      max,
+      min,
+      step,
+      value
+    } = setting[i]!
 
     const { $row, $label } = createRow(
       Object.assign(
@@ -237,7 +249,6 @@ function createPanel(
     $.render($row, panel.$ref)
     $.render(panel.$ref, target)
 
-    //处理 selector，因为依赖label，所以需先创建子 panel
     if (children) {
       const nextIsSelectorOptionsPanel =
         type == 'selector' && children.every((it) => !Boolean(it.type) || it.type == 'option')
@@ -308,7 +319,7 @@ function createPanel(
         // TODO: update methond
       } else {
         if (type == 'option' || (type == undefined && !isSelectorOptionsPanel)) {
-          $row.addEventListener('click', (e) => (onChange || options.parenOnChange)?.(e))
+          $row.addEventListener('click', (event) => (onChange || options.parenOnChange)?.({ value, event }))
         }
       }
     }