rtsp-vue-player
v1.0.0
Published
一个基于Vue 2.7+的RTSP视频流播放器组件，用于在Web端播放RTSP视频流。
Downloads
102
Readme
rtsp-vue-player
一个基于Vue 2.7+的RTSP视频流播放器组件，用于在Web端播放RTSP视频流。
安装
本地安装
# 进入项目目录
cd rtsp_vue
# 安装依赖
npm install
# 构建项目
npm run build
# 本地链接
npm link
# 在目标项目中使用
npm link rtsp-vue-playerNPM安装
# 发布到NPM后可直接安装
npm install rtsp-vue-player使用方法
1. 引入播放器组件
// 在目标组件中引入
import RtspPlayer from 'rtsp-vue-player'
export default {
components: {
RtspPlayer
},
// ...
}2. 在模板中使用
<template>
<div class="video-container">
<RtspPlayer
:streamUrl="streamUrl"
title="视频标题"
:showTitle="true"
/>
</div>
</template>
<script>
export default {
data() {
return {
streamUrl: "rtsp://127.0.0.1/ch1"
};
}
};
</script>
<style scoped>
.video-container {
width: 100%;
height: 400px;
}
</style>3. 配置播放器库
确保在项目的index.html文件中引入了播放器核心库：
<!-- 在<head>标签中添加 -->
<script src="/static/js/h5player.min.js?v=1"></script>
<script src="/static/js/moment.js"></script>并确保public/static/js目录下存在这两个文件。
组件属性
| 属性名 | 类型 | 默认值 | 说明 | |-------|------|-------|------| | streamUrl | String | "" | RTSP视频流地址 | | title | String | "视频播放" | 视频标题 | | showTitle | Boolean | true | 是否显示标题栏 |
功能特点
- 支持RTSP视频流播放
- 自动适应容器大小
- 响应窗口尺寸变化
- 支持侧边栏变化监听（若依框架）
- 提供简洁的API接口
注意事项
- 本组件依赖
window.JSPlugin，需要确保播放器核心库正确引入 - 由于浏览器限制，RTSP流可能需要通过特定的服务器配置才能正常播放
- 建议使用Firefox浏览器获得更好的兼容性
开发
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 预览生产版本
npm run preview