@boldarialblack/multi-stream-player 1.0.0 → 1.0.1

package/README.md

@@ -1,21 +1,91 @@
 # 用法
 使用包管理器（如 NPM、Yarn 或 pnpm）安装
 ```
-npm install multi-stream-player --save
+npm install @boldarialblack/multi-stream-player --save
 ```
-安装后引入组件
-```
-import StreamPlayer from 'multi-stream-player';
+`@boldarialblack/multi-stream-player` 支持 Vue 2.7.0+ 和 Vue 3.0.0+
+
+## Vue 3 使用方式
+
+```javascript
+import { createApp } from 'vue'
+import App from './App.vue'
+import StreamPlayer from '@boldarialblack/multi-stream-player'
+import '@boldarialblack/multi-stream-player/style.css';
+
+const app = createApp(App)
+app.use(StreamPlayer)
+app.mount('#app')
 ```
-使用
+
+在组件中使用：
+
+```vue
+<template>
+  <div>
+    <!-- 直接使用组件 -->
+    <StreamPlayer :src="url" />
+    
+    <!-- 或使用对话框模式 -->
+    <button @click="openPlayer">打开播放器</button>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    openPlayer() {
+      this.$streamPlayer.open({
+        title: '播放器',
+        src: 'http://example.com/stream'
+      })
+    }
+  }
+}
+</script>
 ```
-<stream-player
-  src="//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8" 
-  protocol="hls"
->
-</stream-player>
+
+## Vue 2 使用方式
+
+```javascript
+import Vue from 'vue'
+import App from './App.vue'
+import StreamPlayer from '@boldarialblack/multi-stream-player'
+import '@boldarialblack/multi-stream-player/style.css';
+
+Vue.use(StreamPlayer)
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')
 ```
 
+在组件中使用：
+
+```vue
+<template>
+  <div>
+    <!-- 直接使用组件 -->
+    <StreamPlayer :src="url" />
+    
+    <!-- 或使用对话框模式 -->
+    <button @click="openPlayer">打开播放器</button>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    openPlayer() {
+      this.$streamPlayer.open({
+        title: '播放器',
+        src: 'http://example.com/stream'
+      })
+    }
+  }
+}
+</script>
+```
 # 详细文档
 指路 ➡️ /docs/components/index.md