@linker-design-plus/mpegtsplayer 1.0.0 → 1.0.2

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 Linker Design Team
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 Linker Design Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.en-US.md

@@ -1,228 +1,228 @@
-# @linker-design-plus/mpegtsplayer
-
-A Vue 3 video player component based on mpegts.js for playing FLV streams with enhanced features and controls.
-
-## Features
-
-- 🎥 **FLV Stream Support**: Play FLV video streams using mpegts.js
-- 🔄 **Auto Reload**: Automatically reload video stream on connection loss
-- 👁️ **Visibility Handling**: Handle tab visibility changes with automatic refresh
-- ⚙️ **Custom Controls**: Toggle native video controls on/off
-- 📡 **Live Streaming**: Optimized for live streaming with low latency
-- 🎯 **Error Handling**: Comprehensive error handling and event reporting
-- 📱 **Responsive**: Adapts to container size changes
-- 🎨 **Styled Components**: Built-in loading indicator and clean UI
-
-## Installation
-
-```bash
-# Using pnpm (recommended)
-pnpm add @linker-design-plus/mpegtsplayer
-
-# Using npm
-npm install @linker-design-plus/mpegtsplayer
-
-# Using yarn
-yarn add @linker-design-plus/mpegtsplayer
-```
-
-## Usage
-
-### Import Component
-
-```js
-// In your main.js or entry point
-import { createApp } from 'vue';
-import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
-import '@linker-design-plus/mpegtsplayer/dist/style.css';
-
-const app = createApp(App);
-app.component('MpegtsPlayer', MpegtsPlayer);
-```
-
-Or use it locally in your component:
-
-```vue
-<script setup>
-import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
-import '@linker-design-plus/mpegtsplayer/dist/style.css';
-</script>
-```
-
-### Basic Usage
-
-```vue
-<template>
-  <div style="width: 800px; height: 450px;">
-    <MpegtsPlayer 
-      video-url="http://example.com/stream.flv"
-      :is-live="true"
-      :controls="true"
-    />
-  </div>
-</div>
-```
-
-### Live Stream Configuration
-
-```vue
-<template>
-  <div style="width: 100%; height: 100%;">
-    <MpegtsPlayer 
-      video-url="http://example.com/live-stream.flv"
-      :is-live="true"
-      :auto-reload="true"
-      :auto-visibility-change-refresh="true"
-      :close-visibility-change-listener="false"
-      :controls="true"
-    />
-  </div>
-</div>
-```
-
-### VOD Configuration
-
-```vue
-<template>
-  <div style="width: 800px; height: 450px;">
-    <MpegtsPlayer 
-      video-url="http://example.com/video.flv"
-      :is-live="false"
-      :controls="true"
-      :current-time="0"
-    />
-  </div>
-</div>
-```
-
-## API
-
-### Props
-
-| Prop | Description | Type | Default |
-|------|-------------|------|---------|
-| videoUrl | Video stream URL | string | "" |
-| closeVisibilityChangeListener | Close visibility change listener | boolean | false |
-| autoVisibilityChangeRefresh | Auto refresh on visibility change | boolean | false |
-| autoReload | Auto reload on error | boolean | false |
-| isLive | Is live stream | boolean | true |
-| controls | Show native controls | boolean | false |
-| currentTime | Current playback time | number | 0 |
-
-### Events
-
-| Event | Description | Callback Parameters |
-|-------|-------------|-------------------|
-| loadError | Load error | errorInfo: any |
-| playSuccess | Play success | - |
-| loadComplete | Load complete | - |
-| visibilitychange | Visibility change | visibilityState: string |
-| timeupdate | Time update | time: number |
-| playEnded | Play ended | - |
-| playLoading | Play loading | - |
-
-### Methods (Exposed via ref)
-
-| Method | Description | Parameters |
-|--------|-------------|------------|
-| start() | Start playback | - |
-| pause() | Pause playback | - |
-| destroy() | Destroy player | - |
-| reload() | Reload player | - |
-
-### Accessing Methods Example
-
-```vue
-<template>
-  <div>
-    <MpegtsPlayer 
-      ref="playerRef"
-      video-url="http://example.com/stream.flv"
-      :is-live="true"
-    />
-    <button @click="play">Play</button>
-    <button @click="pause">Pause</button>
-    <button @click="reload">Reload</button>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
-
-const playerRef = ref(null);
-
-const play = () => {
-  playerRef.value.start();
-};
-
-const pause = () => {
-  playerRef.value.pause();
-};
-
-const reload = () => {
-  playerRef.value.reload();
-};
-</script>
-```
-
-## Feature Descriptions
-
-### Auto Reconnect
-When `autoReload` is enabled, the player will automatically attempt to reconnect to the stream if the connection is lost, trying up to 2 times before emitting an error.
-
-### Visibility Handling
-The player can automatically reload when the browser tab becomes visible again after being hidden, controlled by the `autoVisibilityChangeRefresh` prop.
-
-### Controls Customization
-The native video controls can be toggled on/off using the `controls` prop. When disabled, custom controls can be implemented using the exposed methods.
-
-### Live Stream Optimization
-Optimized settings for live streaming including:
-- Disabled stash buffer for lower latency
-- Disabled lazy loading for continuous streaming
-- Enabled live buffer latency chasing for smooth playback
-
-## Style Customization
-
-The component includes built-in styling. You can override the default styles by targeting these classes:
-
-```css
-.mainContainer {
-  /* Container styles */
-}
-
-.video-container {
-  /* Video element styles */
-}
-
-.meta-data-loading {
-  /* Loading spinner styles */
-}
-
-.no-control {
-  /* Class applied when controls are disabled */
-}
-```
-
-## Dependencies
-
-- Vue 3.1.0+
-- mpegts.js 1.7.3
-- @arco-design/web-vue 2.56.3
-
-## Browser Compatibility
-
-- Modern browsers supporting ES2015+
-- Media Source Extensions (MSE) support required for FLV playback
-
-## Notes
-
-1. For production use, ensure your video stream URL supports CORS
-2. The player is optimized for FLV streams; other formats may not work correctly
-3. For live streaming, latency optimizations are enabled by default
-4. Memory is automatically managed through proper destroy lifecycle
-
-## License
-
+# @linker-design-plus/mpegtsplayer
+
+A Vue 3 video player component based on mpegts.js for playing FLV streams with enhanced features and controls.
+
+## Features
+
+- 🎥 **FLV Stream Support**: Play FLV video streams using mpegts.js
+- 🔄 **Auto Reload**: Automatically reload video stream on connection loss
+- 👁️ **Visibility Handling**: Handle tab visibility changes with automatic refresh
+- ⚙️ **Custom Controls**: Toggle native video controls on/off
+- 📡 **Live Streaming**: Optimized for live streaming with low latency
+- 🎯 **Error Handling**: Comprehensive error handling and event reporting
+- 📱 **Responsive**: Adapts to container size changes
+- 🎨 **Styled Components**: Built-in loading indicator and clean UI
+
+## Installation
+
+```bash
+# Using pnpm (recommended)
+pnpm add @linker-design-plus/mpegtsplayer
+
+# Using npm
+npm install @linker-design-plus/mpegtsplayer
+
+# Using yarn
+yarn add @linker-design-plus/mpegtsplayer
+```
+
+## Usage
+
+### Import Component
+
+```js
+// In your main.js or entry point
+import { createApp } from 'vue';
+import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
+import '@linker-design-plus/mpegtsplayer/dist/style.css';
+
+const app = createApp(App);
+app.component('MpegtsPlayer', MpegtsPlayer);
+```
+
+Or use it locally in your component:
+
+```vue
+<script setup>
+import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
+import '@linker-design-plus/mpegtsplayer/dist/style.css';
+</script>
+```
+
+### Basic Usage
+
+```vue
+<template>
+  <div style="width: 800px; height: 450px;">
+    <MpegtsPlayer 
+      video-url="http://example.com/stream.flv"
+      :is-live="true"
+      :controls="true"
+    />
+  </div>
+</div>
+```
+
+### Live Stream Configuration
+
+```vue
+<template>
+  <div style="width: 100%; height: 100%;">
+    <MpegtsPlayer 
+      video-url="http://example.com/live-stream.flv"
+      :is-live="true"
+      :auto-reload="true"
+      :auto-visibility-change-refresh="true"
+      :close-visibility-change-listener="false"
+      :controls="true"
+    />
+  </div>
+</div>
+```
+
+### VOD Configuration
+
+```vue
+<template>
+  <div style="width: 800px; height: 450px;">
+    <MpegtsPlayer 
+      video-url="http://example.com/video.flv"
+      :is-live="false"
+      :controls="true"
+      :current-time="0"
+    />
+  </div>
+</div>
+```
+
+## API
+
+### Props
+
+| Prop | Description | Type | Default |
+|------|-------------|------|---------|
+| videoUrl | Video stream URL | string | "" |
+| closeVisibilityChangeListener | Close visibility change listener | boolean | false |
+| autoVisibilityChangeRefresh | Auto refresh on visibility change | boolean | false |
+| autoReload | Auto reload on error | boolean | false |
+| isLive | Is live stream | boolean | true |
+| controls | Show native controls | boolean | false |
+| currentTime | Current playback time | number | 0 |
+
+### Events
+
+| Event | Description | Callback Parameters |
+|-------|-------------|-------------------|
+| loadError | Load error | errorInfo: any |
+| playSuccess | Play success | - |
+| loadComplete | Load complete | - |
+| visibilitychange | Visibility change | visibilityState: string |
+| timeupdate | Time update | time: number |
+| playEnded | Play ended | - |
+| playLoading | Play loading | - |
+
+### Methods (Exposed via ref)
+
+| Method | Description | Parameters |
+|--------|-------------|------------|
+| start() | Start playback | - |
+| pause() | Pause playback | - |
+| destroy() | Destroy player | - |
+| reload() | Reload player | - |
+
+### Accessing Methods Example
+
+```vue
+<template>
+  <div>
+    <MpegtsPlayer 
+      ref="playerRef"
+      video-url="http://example.com/stream.flv"
+      :is-live="true"
+    />
+    <button @click="play">Play</button>
+    <button @click="pause">Pause</button>
+    <button @click="reload">Reload</button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
+
+const playerRef = ref(null);
+
+const play = () => {
+  playerRef.value.start();
+};
+
+const pause = () => {
+  playerRef.value.pause();
+};
+
+const reload = () => {
+  playerRef.value.reload();
+};
+</script>
+```
+
+## Feature Descriptions
+
+### Auto Reconnect
+When `autoReload` is enabled, the player will automatically attempt to reconnect to the stream if the connection is lost, trying up to 2 times before emitting an error.
+
+### Visibility Handling
+The player can automatically reload when the browser tab becomes visible again after being hidden, controlled by the `autoVisibilityChangeRefresh` prop.
+
+### Controls Customization
+The native video controls can be toggled on/off using the `controls` prop. When disabled, custom controls can be implemented using the exposed methods.
+
+### Live Stream Optimization
+Optimized settings for live streaming including:
+- Disabled stash buffer for lower latency
+- Disabled lazy loading for continuous streaming
+- Enabled live buffer latency chasing for smooth playback
+
+## Style Customization
+
+The component includes built-in styling. You can override the default styles by targeting these classes:
+
+```css
+.mainContainer {
+  /* Container styles */
+}
+
+.video-container {
+  /* Video element styles */
+}
+
+.meta-data-loading {
+  /* Loading spinner styles */
+}
+
+.no-control {
+  /* Class applied when controls are disabled */
+}
+```
+
+## Dependencies
+
+- Vue 3.1.0+
+- mpegts.js 1.7.3
+- @arco-design/web-vue 2.56.3
+
+## Browser Compatibility
+
+- Modern browsers supporting ES2015+
+- Media Source Extensions (MSE) support required for FLV playback
+
+## Notes
+
+1. For production use, ensure your video stream URL supports CORS
+2. The player is optimized for FLV streams; other formats may not work correctly
+3. For live streaming, latency optimizations are enabled by default
+4. Memory is automatically managed through proper destroy lifecycle
+
+## License
+
 MIT