@linker-design-plus/mpegtsplayer 1.0.0

package/LICENSE

@@ -0,0 +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.

package/README.en-US.md

@@ -0,0 +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
+
+MIT

package/README.md

@@ -0,0 +1,227 @@
+# @linker-design-plus/mpegtsplayer
+
+一个基于 mpegts.js 的 Vue 3 视频播放器组件，用于播放 FLV 流媒体，具有增强的功能和控件。
+
+## 功能特性
+
+- 🎥 **FLV 流媒体支持**：使用 mpegts.js 播放 FLV 视频流
+- 🔄 **自动重载**：连接丢失时自动重新加载视频流
+- 👁️ **可见性处理**：处理标签页可见性变化并自动刷新
+- ⚙️ **自定义控件**：切换原生视频控件的显示/隐藏
+- 📡 **直播流优化**：针对直播流进行了低延迟优化
+- 🎯 **错误处理**：全面的错误处理和事件报告
+- 📱 **响应式设计**：适应容器尺寸变化
+- 🎨 **样式化组件**：内置加载指示器和简洁的界面
+
+## 安装
+
+```bash
+# 推荐使用 pnpm
+pnpm add @linker-design-plus/mpegtsplayer
+
+# 使用 npm
+npm install @linker-design-plus/mpegtsplayer
+
+# 使用 yarn
+yarn add @linker-design-plus/mpegtsplayer
+```
+
+## 使用方法
+
+### 引入组件
+
+```js
+// 在 main.js 或入口文件中
+import { createApp } from 'vue';
+import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
+
+const app = createApp(App);
+app.component('MpegtsPlayer', MpegtsPlayer);
+```
+
+或者在组件中局部使用：
+
+```vue
+<script setup>
+import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
+</script>
+```
+
+### 基础用法
+
+```vue
+<template>
+  <div style="width: 800px; height: 450px;">
+    <MpegtsPlayer 
+      video-url="http://example.com/stream.flv"
+      :is-live="true"
+      :controls="true"
+    />
+  </div>
+</div>
+```
+
+### 直播流配置
+
+```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>
+```
+
+### 点播视频配置
+
+```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
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| videoUrl | 视频流 URL | string | "" |
+| closeVisibilityChangeListener | 关闭可见性变化监听器 | boolean | false |
+| autoVisibilityChangeRefresh | 可见性变化时自动刷新 | boolean | false |
+| autoReload | 错误时自动重载 | boolean | false |
+| isLive | 是否为直播流 | boolean | true |
+| controls | 显示原生控件 | boolean | false |
+| currentTime | 当前播放时间 | number | 0 |
+| stallTimeout | 卡顿检测超时时间（毫秒） | number | 5000 |
+
+### Events
+
+| 事件 | 说明 | 回调参数 |
+|------|------|----------|
+| loadError | 加载错误 | errorInfo: any |
+| playSuccess | 播放成功 | - |
+| loadComplete | 加载完成 | - |
+| visibilitychange | 可见性变化 | visibilityState: string |
+| timeupdate | 时间更新 | time: number |
+| playEnded | 播放结束 | - |
+| playLoading | 播放加载中 | - |
+
+### 方法 (通过 ref 暴露)
+
+| 方法 | 说明 | 参数 |
+|------|------|------|
+| start() | 开始播放 | - |
+| pause() | 暂停播放 | - |
+| destroy() | 销毁播放器 | - |
+| reload() | 重新加载播放器 | - |
+
+### 访问方法示例
+
+```vue
+<template>
+  <div>
+    <MpegtsPlayer 
+      ref="playerRef"
+      video-url="http://example.com/stream.flv"
+      :is-live="true"
+    />
+    <button @click="play">播放</button>
+    <button @click="pause">暂停</button>
+    <button @click="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>
+```
+
+## 功能描述
+
+### 自动重连
+当启用 `autoReload` 时，如果连接丢失，播放器将自动尝试重新连接到流媒体，最多尝试 2 次后发出错误事件。
+
+### 可见性处理
+当浏览器标签页在隐藏后重新可见时，播放器可以自动重新加载，由 `autoVisibilityChangeRefresh` 属性控制。
+
+### 控件自定义
+可以使用 `controls` 属性切换原生视频控件的显示/隐藏。禁用时，可以使用暴露的方法实现自定义控件。
+
+### 直播流优化
+针对直播流的优化设置包括：
+- 禁用 stash 缓冲区以降低延迟
+- 禁用懒加载以实现连续流媒体播放
+- 启用实时缓冲区延迟追踪以实现流畅播放
+
+## 样式自定义
+
+组件包含内置样式。您可以通过以下类名覆盖默认样式：
+
+```css
+.mainContainer {
+  /* 容器样式 */
+}
+
+.video-container {
+  /* 视频元素样式 */
+}
+
+.meta-data-loading {
+  /* 加载旋转图标样式 */
+}
+
+.no-control {
+  /* 控件禁用时应用的类 */
+}
+```
+
+## 依赖
+
+- Vue 3.1.0+
+- mpegts.js 1.7.3
+- @arco-design/web-vue 2.56.3
+
+## 浏览器兼容性
+
+- 支持 ES2015+ 的现代浏览器
+- FLV 播放需要支持媒体源扩展 (MSE)
+
+## 注意事项
+
+1. 生产环境中，请确保您的视频流 URL 支持 CORS
+2. 播放器针对 FLV 流进行了优化；其他格式可能无法正常工作
+3. 对于直播流，默认启用了延迟优化
+4. 通过适当的销毁生命周期自动管理内存
+
+## 许可证
+
+MIT

package/dist/MpegtsPlayer.d.ts

@@ -0,0 +1,156 @@
+import { Player } from 'mpegts.js';
+import './MpegtsPlayer.less';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    videoUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeVisibilityChangeListener: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoVisibilityChangeRefresh: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoReload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isLive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    controls: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    currentTime: {
+        type: NumberConstructor;
+        default: number;
+    };
+    stallTimeout: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, {
+    flvPlayer: import("vue").Ref<{
+        destroy: () => void;
+        on: (event: string, listener: (...args: any[]) => void) => void;
+        off: (event: string, listener: (...args: any[]) => void) => void;
+        attachMediaElement: (mediaElement: HTMLMediaElement) => void;
+        detachMediaElement: () => void;
+        load: () => void;
+        unload: () => void;
+        play: () => Promise<void>;
+        pause: () => void;
+        type: string;
+        buffered: {
+            readonly length: number;
+            end: (index: number) => number;
+            start: (index: number) => number;
+        };
+        duration: number;
+        volume: number;
+        muted: boolean;
+        currentTime: number;
+        playbackRate: number;
+        readyState: number;
+        seeking: boolean;
+        paused: boolean;
+        ended: boolean;
+        networkState: number;
+        videoWidth: number;
+        videoHeight: number;
+    } | null, Player | {
+        destroy: () => void;
+        on: (event: string, listener: (...args: any[]) => void) => void;
+        off: (event: string, listener: (...args: any[]) => void) => void;
+        attachMediaElement: (mediaElement: HTMLMediaElement) => void;
+        detachMediaElement: () => void;
+        load: () => void;
+        unload: () => void;
+        play: () => Promise<void>;
+        pause: () => void;
+        type: string;
+        buffered: {
+            readonly length: number;
+            end: (index: number) => number;
+            start: (index: number) => number;
+        };
+        duration: number;
+        volume: number;
+        muted: boolean;
+        currentTime: number;
+        playbackRate: number;
+        readyState: number;
+        seeking: boolean;
+        paused: boolean;
+        ended: boolean;
+        networkState: number;
+        videoWidth: number;
+        videoHeight: number;
+    } | null>;
+    videoContainerRef: import("vue").Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
+    loadMetaData: import("vue").Ref<boolean, boolean>;
+    start: () => Promise<void>;
+    pause: () => void;
+    destroy: () => void;
+    reload: () => void;
+    handleCanplay: (e: any) => Promise<void>;
+    handleLoadedmetadata: () => void;
+    handleTimeupdate: (e: any) => void;
+    handlePlayEnded: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("loadError" | "playSuccess" | "loadComplete" | "visibilitychange" | "timeupdate" | "playEnded" | "playLoading")[], "loadError" | "playSuccess" | "loadComplete" | "visibilitychange" | "timeupdate" | "playEnded" | "playLoading", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    videoUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeVisibilityChangeListener: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoVisibilityChangeRefresh: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoReload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isLive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    controls: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    currentTime: {
+        type: NumberConstructor;
+        default: number;
+    };
+    stallTimeout: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{
+    onLoadError?: ((...args: any[]) => any) | undefined;
+    onPlaySuccess?: ((...args: any[]) => any) | undefined;
+    onLoadComplete?: ((...args: any[]) => any) | undefined;
+    onVisibilitychange?: ((...args: any[]) => any) | undefined;
+    onTimeupdate?: ((...args: any[]) => any) | undefined;
+    onPlayEnded?: ((...args: any[]) => any) | undefined;
+    onPlayLoading?: ((...args: any[]) => any) | undefined;
+}>, {
+    videoUrl: string;
+    closeVisibilityChangeListener: boolean;
+    autoVisibilityChangeRefresh: boolean;
+    autoReload: boolean;
+    isLive: boolean;
+    controls: boolean;
+    currentTime: number;
+    stallTimeout: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=MpegtsPlayer.d.ts.map

package/dist/MpegtsPlayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MpegtsPlayer.d.ts","sourceRoot":"","sources":["../src/MpegtsPlayer.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAE1C,OAAO,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCA6Db,GAAE;wCACoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;uCADzB,GAAE;wCACoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA8IL,GAAG;;0BAwBN,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAlOpC,wBA0TG"}

package/dist/index.d.ts

@@ -0,0 +1,374 @@
+import type { App } from 'vue';
+import MpegtsPlayerContainer from './MpegtsPlayer';
+declare const MpegtsPlayer: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        videoUrl: {
+            type: StringConstructor;
+            default: string;
+        };
+        closeVisibilityChangeListener: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        autoVisibilityChangeRefresh: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        autoReload: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        isLive: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        controls: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        currentTime: {
+            type: NumberConstructor;
+            default: number;
+        };
+        stallTimeout: {
+            type: NumberConstructor;
+            default: number;
+        };
+    }>> & Readonly<{
+        onLoadError?: ((...args: any[]) => any) | undefined;
+        onPlaySuccess?: ((...args: any[]) => any) | undefined;
+        onLoadComplete?: ((...args: any[]) => any) | undefined;
+        onVisibilitychange?: ((...args: any[]) => any) | undefined;
+        onTimeupdate?: ((...args: any[]) => any) | undefined;
+        onPlayEnded?: ((...args: any[]) => any) | undefined;
+        onPlayLoading?: ((...args: any[]) => any) | undefined;
+    }>, {
+        flvPlayer: import("vue").Ref<{
+            destroy: () => void;
+            on: (event: string, listener: (...args: any[]) => void) => void;
+            off: (event: string, listener: (...args: any[]) => void) => void;
+            attachMediaElement: (mediaElement: HTMLMediaElement) => void;
+            detachMediaElement: () => void;
+            load: () => void;
+            unload: () => void;
+            play: () => Promise<void>;
+            pause: () => void;
+            type: string;
+            buffered: {
+                readonly length: number;
+                end: (index: number) => number;
+                start: (index: number) => number;
+            };
+            duration: number;
+            volume: number;
+            muted: boolean;
+            currentTime: number;
+            playbackRate: number;
+            readyState: number;
+            seeking: boolean;
+            paused: boolean;
+            ended: boolean;
+            networkState: number;
+            videoWidth: number;
+            videoHeight: number;
+        } | null, import("mpegts.js").Player | {
+            destroy: () => void;
+            on: (event: string, listener: (...args: any[]) => void) => void;
+            off: (event: string, listener: (...args: any[]) => void) => void;
+            attachMediaElement: (mediaElement: HTMLMediaElement) => void;
+            detachMediaElement: () => void;
+            load: () => void;
+            unload: () => void;
+            play: () => Promise<void>;
+            pause: () => void;
+            type: string;
+            buffered: {
+                readonly length: number;
+                end: (index: number) => number;
+                start: (index: number) => number;
+            };
+            duration: number;
+            volume: number;
+            muted: boolean;
+            currentTime: number;
+            playbackRate: number;
+            readyState: number;
+            seeking: boolean;
+            paused: boolean;
+            ended: boolean;
+            networkState: number;
+            videoWidth: number;
+            videoHeight: number;
+        } | null>;
+        videoContainerRef: import("vue").Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
+        loadMetaData: import("vue").Ref<boolean, boolean>;
+        start: () => Promise<void>;
+        pause: () => void;
+        destroy: () => void;
+        reload: () => void;
+        handleCanplay: (e: any) => Promise<void>;
+        handleLoadedmetadata: () => void;
+        handleTimeupdate: (e: any) => void;
+        handlePlayEnded: () => void;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("loadError" | "playSuccess" | "loadComplete" | "visibilitychange" | "timeupdate" | "playEnded" | "playLoading")[], import("vue").PublicProps, {
+        videoUrl: string;
+        closeVisibilityChangeListener: boolean;
+        autoVisibilityChangeRefresh: boolean;
+        autoReload: boolean;
+        isLive: boolean;
+        controls: boolean;
+        currentTime: number;
+        stallTimeout: number;
+    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        videoUrl: {
+            type: StringConstructor;
+            default: string;
+        };
+        closeVisibilityChangeListener: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        autoVisibilityChangeRefresh: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        autoReload: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        isLive: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        controls: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        currentTime: {
+            type: NumberConstructor;
+            default: number;
+        };
+        stallTimeout: {
+            type: NumberConstructor;
+            default: number;
+        };
+    }>> & Readonly<{
+        onLoadError?: ((...args: any[]) => any) | undefined;
+        onPlaySuccess?: ((...args: any[]) => any) | undefined;
+        onLoadComplete?: ((...args: any[]) => any) | undefined;
+        onVisibilitychange?: ((...args: any[]) => any) | undefined;
+        onTimeupdate?: ((...args: any[]) => any) | undefined;
+        onPlayEnded?: ((...args: any[]) => any) | undefined;
+        onPlayLoading?: ((...args: any[]) => any) | undefined;
+    }>, {
+        flvPlayer: import("vue").Ref<{
+            destroy: () => void;
+            on: (event: string, listener: (...args: any[]) => void) => void;
+            off: (event: string, listener: (...args: any[]) => void) => void;
+            attachMediaElement: (mediaElement: HTMLMediaElement) => void;
+            detachMediaElement: () => void;
+            load: () => void;
+            unload: () => void;
+            play: () => Promise<void>;
+            pause: () => void;
+            type: string;
+            buffered: {
+                readonly length: number;
+                end: (index: number) => number;
+                start: (index: number) => number;
+            };
+            duration: number;
+            volume: number;
+            muted: boolean;
+            currentTime: number;
+            playbackRate: number;
+            readyState: number;
+            seeking: boolean;
+            paused: boolean;
+            ended: boolean;
+            networkState: number;
+            videoWidth: number;
+            videoHeight: number;
+        } | null, import("mpegts.js").Player | {
+            destroy: () => void;
+            on: (event: string, listener: (...args: any[]) => void) => void;
+            off: (event: string, listener: (...args: any[]) => void) => void;
+            attachMediaElement: (mediaElement: HTMLMediaElement) => void;
+            detachMediaElement: () => void;
+            load: () => void;
+            unload: () => void;
+            play: () => Promise<void>;
+            pause: () => void;
+            type: string;
+            buffered: {
+                readonly length: number;
+                end: (index: number) => number;
+                start: (index: number) => number;
+            };
+            duration: number;
+            volume: number;
+            muted: boolean;
+            currentTime: number;
+            playbackRate: number;
+            readyState: number;
+            seeking: boolean;
+            paused: boolean;
+            ended: boolean;
+            networkState: number;
+            videoWidth: number;
+            videoHeight: number;
+        } | null>;
+        videoContainerRef: import("vue").Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
+        loadMetaData: import("vue").Ref<boolean, boolean>;
+        start: () => Promise<void>;
+        pause: () => void;
+        destroy: () => void;
+        reload: () => void;
+        handleCanplay: (e: any) => Promise<void>;
+        handleLoadedmetadata: () => void;
+        handleTimeupdate: (e: any) => void;
+        handlePlayEnded: () => void;
+    }, {}, {}, {}, {
+        videoUrl: string;
+        closeVisibilityChangeListener: boolean;
+        autoVisibilityChangeRefresh: boolean;
+        autoReload: boolean;
+        isLive: boolean;
+        controls: boolean;
+        currentTime: number;
+        stallTimeout: number;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    videoUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    closeVisibilityChangeListener: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoVisibilityChangeRefresh: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoReload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isLive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    controls: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    currentTime: {
+        type: NumberConstructor;
+        default: number;
+    };
+    stallTimeout: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{
+    onLoadError?: ((...args: any[]) => any) | undefined;
+    onPlaySuccess?: ((...args: any[]) => any) | undefined;
+    onLoadComplete?: ((...args: any[]) => any) | undefined;
+    onVisibilitychange?: ((...args: any[]) => any) | undefined;
+    onTimeupdate?: ((...args: any[]) => any) | undefined;
+    onPlayEnded?: ((...args: any[]) => any) | undefined;
+    onPlayLoading?: ((...args: any[]) => any) | undefined;
+}>, {
+    flvPlayer: import("vue").Ref<{
+        destroy: () => void;
+        on: (event: string, listener: (...args: any[]) => void) => void;
+        off: (event: string, listener: (...args: any[]) => void) => void;
+        attachMediaElement: (mediaElement: HTMLMediaElement) => void;
+        detachMediaElement: () => void;
+        load: () => void;
+        unload: () => void;
+        play: () => Promise<void>;
+        pause: () => void;
+        type: string;
+        buffered: {
+            readonly length: number;
+            end: (index: number) => number;
+            start: (index: number) => number;
+        };
+        duration: number;
+        volume: number;
+        muted: boolean;
+        currentTime: number;
+        playbackRate: number;
+        readyState: number;
+        seeking: boolean;
+        paused: boolean;
+        ended: boolean;
+        networkState: number;
+        videoWidth: number;
+        videoHeight: number;
+    } | null, import("mpegts.js").Player | {
+        destroy: () => void;
+        on: (event: string, listener: (...args: any[]) => void) => void;
+        off: (event: string, listener: (...args: any[]) => void) => void;
+        attachMediaElement: (mediaElement: HTMLMediaElement) => void;
+        detachMediaElement: () => void;
+        load: () => void;
+        unload: () => void;
+        play: () => Promise<void>;
+        pause: () => void;
+        type: string;
+        buffered: {
+            readonly length: number;
+            end: (index: number) => number;
+            start: (index: number) => number;
+        };
+        duration: number;
+        volume: number;
+        muted: boolean;
+        currentTime: number;
+        playbackRate: number;
+        readyState: number;
+        seeking: boolean;
+        paused: boolean;
+        ended: boolean;
+        networkState: number;
+        videoWidth: number;
+        videoHeight: number;
+    } | null>;
+    videoContainerRef: import("vue").Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
+    loadMetaData: import("vue").Ref<boolean, boolean>;
+    start: () => Promise<void>;
+    pause: () => void;
+    destroy: () => void;
+    reload: () => void;
+    handleCanplay: (e: any) => Promise<void>;
+    handleLoadedmetadata: () => void;
+    handleTimeupdate: (e: any) => void;
+    handlePlayEnded: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("loadError" | "playSuccess" | "loadComplete" | "visibilitychange" | "timeupdate" | "playEnded" | "playLoading")[], "loadError" | "playSuccess" | "loadComplete" | "visibilitychange" | "timeupdate" | "playEnded" | "playLoading", {
+    videoUrl: string;
+    closeVisibilityChangeListener: boolean;
+    autoVisibilityChangeRefresh: boolean;
+    autoReload: boolean;
+    isLive: boolean;
+    controls: boolean;
+    currentTime: number;
+    stallTimeout: number;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    install: (app: App) => void;
+};
+export type MpegtsPlayerInstance = InstanceType<typeof MpegtsPlayerContainer>;
+export default MpegtsPlayer;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE/B,OAAO,qBAAqB,MAAM,gBAAgB,CAAC;AAEnD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAUs+B,GAAG;4CAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAArE,GAAG;4CAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAArE,GAAG;4CAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAArE,GAAG;4CAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAArE,GAAG;wCAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAArE,GAAG;wCAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAT5iC,GAAG;CAIlB,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAE9E,eAAe,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";const o=require("vue"),u=require("mpegts.js"),O=Symbol("ArcoConfigProvider"),I="arco",N="$arco",x=e=>{var n,t,s;const c=o.getCurrentInstance(),d=o.inject(O,void 0),i=(s=(t=d==null?void 0:d.prefixCls)!=null?t:(n=c==null?void 0:c.appContext.config.globalProperties[N])==null?void 0:n.classPrefix)!=null?s:I;return e?`${i}-${e}`:i},z=Object.prototype.toString;function D(e){return z.call(e)==="[object Number]"&&e===e}var F=(e,n)=>{for(const[t,s]of n)e[t]=s;return e};const j=o.defineComponent({name:"IconLoading",props:{size:{type:[Number,String]},strokeWidth:{type:Number,default:4},strokeLinecap:{type:String,default:"butt",validator:e=>["butt","round","square"].includes(e)},strokeLinejoin:{type:String,default:"miter",validator:e=>["arcs","bevel","miter","miter-clip","round"].includes(e)},rotate:Number,spin:Boolean},emits:{click:e=>!0},setup(e,{emit:n}){const t=x("icon"),s=o.computed(()=>[t,`${t}-loading`,{[`${t}-spin`]:e.spin}]),c=o.computed(()=>{const i={};return e.size&&(i.fontSize=D(e.size)?`${e.size}px`:e.size),e.rotate&&(i.transform=`rotate(${e.rotate}deg)`),i});return{cls:s,innerStyle:c,onClick:i=>{n("click",i)}}}}),A=["stroke-width","stroke-linecap","stroke-linejoin"],V=o.createElementVNode("path",{d:"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6"},null,-1),U=[V];function G(e,n,t,s,c,d){return o.openBlock(),o.createElementBlock("svg",{viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",stroke:"currentColor",class:o.normalizeClass(e.cls),style:o.normalizeStyle(e.innerStyle),"stroke-width":e.strokeWidth,"stroke-linecap":e.strokeLinecap,"stroke-linejoin":e.strokeLinejoin,onClick:n[0]||(n[0]=(...i)=>e.onClick&&e.onClick(...i))},U,14,A)}var y=F(j,[["render",G]]);const W=Object.assign(y,{install:(e,n)=>{var t;const s=(t=n==null?void 0:n.iconPrefix)!=null?t:"";e.component(s+y.name,y)}});const g=o.defineComponent({name:"MpegtsPlayer",props:{videoUrl:{type:String,default:""},closeVisibilityChangeListener:{type:Boolean,default:!1},autoVisibilityChangeRefresh:{type:Boolean,default:!1},autoReload:{type:Boolean,default:!1},isLive:{type:Boolean,default:!0},controls:{type:Boolean,default:!1},currentTime:{type:Number,default:0},stallTimeout:{type:Number,default:5e3}},emits:["loadError","playSuccess","loadComplete","visibilitychange","timeupdate","playEnded","playLoading"],setup(e,{emit:n}){const t=o.ref(null),s=o.ref(null),c=o.ref(!0),d=o.ref(!1),i=o.ref(0);let p=0,m=Date.now();const h=()=>{const a=s.value;t.value=u.createPlayer({type:"flv",isLive:e.isLive,hasAudio:!1,cors:!0,url:e.videoUrl},{enableWorker:!1,enableWorkerForMSE:!1,enableStashBuffer:!e.isLive,stashInitialSize:128,lazyLoad:!1,lazyLoadMaxDuration:.2,deferLoadAfterSourceOpen:!1,liveBufferLatencyChasing:!!e.isLive,liveBufferLatencyMaxLatency:1,liveBufferLatencyMinRemain:.5,autoCleanupSourceBuffer:!0,autoCleanupMinBackwardDuration:30,autoCleanupMaxBackwardDuration:60}),t.value.attachMediaElement(a),c.value=!0,k(),S()},k=async()=>{try{t.value.load()}catch(a){console.log(a),n("loadError",a)}},S=()=>{t.value.on(u.Events.ERROR,C),t.value.on(u.Events.LOADING_COMPLETE,L),t.value.on(u.Events.STATISTICS_INFO,P)},C=(a,l,r)=>{console.log(`类型:${JSON.stringify(a)}`,`报错内容${l}`,"报错信息",r),n("loadError",l)},L=(a,l,r)=>{console.log(`类型:${JSON.stringify(a)}`,`报错内容${l}`,"报错信息",r),console.log("直播已结束"),n("loadComplete"),e.autoReload&&M()},P=a=>{const l=a.decodedFrames,r=Date.now();l===p&&l!==0?r-m>e.stallTimeout&&(console.log(`解码帧数超过 ${e.stallTimeout/1e3} 秒没有更新，可能卡顿了`),n("playLoading")):(p=l,m=r)},M=()=>{console.log("自动加载",i.value),i.value++,i.value<=2?v():i.value=0},v=()=>{t.value!=null&&f(),h()},$=()=>t.value.play(),R=()=>t.value.pause(),f=()=>{var a,l,r,E;t.value&&(t.value.off(u.Events.ERROR,C),t.value.off(u.Events.LOADING_COMPLETE,L),(a=t.value)==null||a.pause(),(l=t.value)==null||l.unload(),(r=t.value)==null||r.detachMediaElement(),(E=t.value)==null||E.destroy(),t.value=null)},B=async a=>{var l;if(!(!((l=a.target)!=null&&l.paused)||!c.value)){c.value=!1,console.log("handleCanplay",a.target.paused),i.value=0,d.value=!1;try{await t.value.play(),console.log(t.value),n("playSuccess")}catch(r){console.log("play error",r),n("loadError",r)}}},T=()=>{d.value=!0},_=a=>{var l;n("timeupdate",((l=a==null?void 0:a.target)==null?void 0:l.currentTime)??0)},w=()=>{n("playEnded")},b=()=>{document.visibilityState==="visible"?(n("visibilitychange",document.visibilityState),e.autoVisibilityChangeRefresh&&v()):f()};return o.watch(()=>e.videoUrl,a=>{a&&o.nextTick(()=>{t.value!=null&&f(),console.log(`isSupported: ${u.isSupported()}`),console.log(`是否支持点播视频：${u.getFeatureList().msePlayback}`),console.log(`是否支持httpflv直播流：${u.getFeatureList().mseLivePlayback}`),h()})},{immediate:!0}),o.onMounted(()=>{e.closeVisibilityChangeListener||document.addEventListener("visibilitychange",b)}),o.onUnmounted(()=>{f(),e.closeVisibilityChangeListener||document.removeEventListener("visibilitychange",b)}),{flvPlayer:t,videoContainerRef:s,loadMetaData:d,start:$,pause:R,destroy:f,reload:v,handleCanplay:B,handleLoadedmetadata:T,handleTimeupdate:_,handlePlayEnded:w}},render(){return React.createElement("div",{class:"mainContainer"},React.createElement("video",{class:"video-container",ref:"videoContainerRef",muted:!0,controls:this.controls,onClick:e=>e.preventDefault(),onCanplay:this.handleCanplay,onLoadedmetadata:this.handleLoadedmetadata,onTimeupdate:this.handleTimeupdate,onEnded:this.handlePlayEnded},"Your browser is too old which doesn't support HTML5 video."),this.loadMetaData&&React.createElement(W,{class:"meta-data-loading"}))}}),q=Object.assign(g,{install:e=>{e.component(g.name,g)}});module.exports=q;

package/dist/style.css

@@ -0,0 +1 @@
+.mainContainer{display:block;width:100%;height:100%;margin-left:auto;margin-right:auto;position:relative}.meta-data-loading{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px;font-size:40px;color:rgb(var(--primary-6))}.video-container{width:100%;height:100%}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@linker-design-plus/mpegtsplayer",
+  "version": "1.0.0",
+  "description": "A player base on mpegts.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src/MpegtsPlayer.less"
+  ],
+  "keywords": [
+    "vue",
+    "mpegts",
+    "mpegts-player"
+  ],
+  "author": "Linker Design Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.1.0",
+    "mpegts.js": "1.7.3",
+    "@arco-design/web-vue": "2.56.3"
+  },
+  "dependencies": {
+    "vue": "^3.1.0",
+    "@arco-design/web-vue": "^2.0.0",
+    "mpegts.js": "1.7.3"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.0",
+    "rimraf": "^5.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^4.0.0"
+  },
+  "scripts": {
+    "startup": "pnpm build",
+    "dev": "node scripts/build.mjs -w",
+    "build": "pnpm clean && pnpm build:bundle && pnpm build:types",
+    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
+    "build:bundle": "node scripts/build.mjs",
+    "build:dev": "tsc",
+    "clean": "rimraf ./dist"
+  }
+}

package/src/MpegtsPlayer.less

@@ -0,0 +1,23 @@
+.mainContainer {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+}
+
+.meta-data-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -20px; /* 子元素高度的一半 */
+  margin-left: -20px; /* 子元素宽度的一半 */
+  font-size: 40px;
+  color: rgb(var(--primary-6));
+}
+
+.video-container {
+  width: 100%;
+  height: 100%;
+}