Package Exports

@linker-design-plus/mpegtsplayer
@linker-design-plus/mpegtsplayer/dist/index.js
@linker-design-plus/mpegtsplayer/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@linker-design-plus/mpegtsplayer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@linker-design-plus/mpegtsplayer

一个基于 mpegts.js 的 Vue 3 视频播放器组件，用于播放 FLV 流媒体，具有增强的功能和控件。

功能特性

🎥 FLV 流媒体支持：使用 mpegts.js 播放 FLV 视频流
🔄 自动重载：连接丢失时自动重新加载视频流
👁️ 可见性处理：处理标签页可见性变化并自动刷新
⚙️ 自定义控件：切换原生视频控件的显示/隐藏
📡 直播流优化：针对直播流进行了低延迟优化
🎯 错误处理：全面的错误处理和事件报告
📱 响应式设计：适应容器尺寸变化
🎨 样式化组件：内置加载指示器和简洁的界面

安装

# 推荐使用 pnpm
pnpm add @linker-design-plus/mpegtsplayer

# 使用 npm
npm install @linker-design-plus/mpegtsplayer

# 使用 yarn
yarn add @linker-design-plus/mpegtsplayer

使用方法

引入组件

// 在 main.js 或入口文件中
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);

或者在组件中局部使用：

<script setup>
import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
import '@linker-design-plus/mpegtsplayer/dist/style.css';
</script>

基础用法

<template>
  <div style="width: 800px; height: 450px;">
    <MpegtsPlayer 
      video-url="http://example.com/stream.flv"
    />
  </div>
</div>

直播流配置

<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"
    />
  </div>
</div>

API

Props

参数	说明	类型	默认值
videoUrl	视频流 URL	string	""
closeVisibilityChangeListener	关闭可见性变化监听器	boolean	false
autoVisibilityChangeRefresh	可见性变化时自动刷新	boolean	false
autoReload	错误时自动重载	boolean	false
isLive	是否为直播流	boolean	true
controls	显示原生控件	boolean	false
stallTimeout	卡顿检测超时时间（毫秒）	number	5000

Events

事件	说明	回调参数
loadError	加载错误	errorInfo: any
playSuccess	播放成功	-
loadComplete	加载完成(针对直播流)	-
visibilitychange	可见性变化	visibilityState: string
timeupdate	时间更新	time(s): number
playEnded	播放结束（针对回放流）	-
playLoading	播放加载中(如果视频卡顿了，会触发这个事件)	-

方法 (通过 ref 暴露)

目前start()和pause()是无效的，不能直接控制流的播放或者暂停

方法	说明	参数
start()	开始播放	-
pause()	暂停播放	-
destroy()	销毁播放器	-
reload()	重新加载播放器	-

访问方法示例

<template>
  <div>
    <MpegtsPlayer 
      ref="playerRef"
      video-url="http://example.com/stream.flv"
      :is-live="true"
    />
    <button @click="reload">重新加载</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
import '@linker-design-plus/mpegtsplayer/dist/style.css';

const playerRef = ref(null);

const reload = () => {
  playerRef.value.reload();
};
</script>

功能描述

自动重连

当启用 autoReload 时，如果连接丢失，播放器将自动尝试重新连接到流媒体，最多尝试 2 次后发出错误事件。

可见性处理

当浏览器标签页在隐藏后重新可见时，播放器可以自动重新加载，由 autoVisibilityChangeRefresh 属性控制。

控件自定义

可以使用 controls 属性切换原生视频控件的显示/隐藏。

直播流优化

针对直播流的优化设置包括：

禁用 stash 缓冲区以降低延迟
禁用懒加载以实现连续流媒体播放
启用实时缓冲区延迟追踪以实现流畅播放

依赖

Vue 3.1.0+
mpegts.js 1.7.3
@arco-design/web-vue 2.56.3

浏览器兼容性

支持 ES2015+ 的现代浏览器
FLV 播放需要支持媒体源扩展 (MSE)

注意事项

生产环境中，请确保您的视频流 URL 支持 CORS
播放器针对 FLV 流进行了优化；其他格式可能无法正常工作
对于直播流，默认启用了延迟优化
通过适当的销毁生命周期自动管理内存

许可证

MIT