147 lines
4.0 KiB
Markdown
147 lines
4.0 KiB
Markdown
|
### 丛文CMS视频WEB播放器
|
|||
|
|
|
|||
|
|
#### 1.简介
|
|||
|
|
|
|||
|
|
该Demo项目，目前支持丛文cms格式封装的基于H264\H265压缩格式的实时视频流，录像视频文件以及录像图片文件的播放。
|
|||
|
|
|
|||
|
|
#### 2.操作界面介绍
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
##### 播放实时视频（本地模拟流）
|
|||
|
|
|
|||
|
|
此按钮为播放web服务器端一个本地丛文媒体流文件，适用于没有丛文服务器环境下，了解丛文web视频播放控件。
|
|||
|
|
|
|||
|
|
##### 播放录像文件（本地模拟流）
|
|||
|
|
|
|||
|
|
此按钮为回放web服务器端一个本地丛文媒体流文件，适用于没有丛文服务器环境下，了解丛文web视频播放控件。
|
|||
|
|
|
|||
|
|
##### 播放实时视频（请配置URL）
|
|||
|
|
|
|||
|
|
此按钮为播放实时视频，需要配合丛文服务器，需要配置从视频输出网关获取的视频拉取url。
|
|||
|
|
|
|||
|
|
##### 播放视频对讲（请配置URL）
|
|||
|
|
|
|||
|
|
此按钮为播放实时视频并提供对讲功能，需要配合丛文服务器，需要配置从视频输出网关获取的视频拉取url和对讲url。
|
|||
|
|
|
|||
|
|
##### 播放录像文件（请配置URL）
|
|||
|
|
|
|||
|
|
此按钮为回放录像文件，需要配合丛文服务器，需要配置从视频输出网关获取的录像文件拉取url。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 3.功能说明
|
|||
|
|
|
|||
|
|
- 实时视频
|
|||
|
|
|
|||
|
|
播放、暂停、恢复播放、监听、对讲、全屏
|
|||
|
|
|
|||
|
|
- 录像视频
|
|||
|
|
|
|||
|
|
播放、暂停、恢复播放、播放进度跳转
|
|||
|
|
|
|||
|
|
- 图片回放
|
|||
|
|
|
|||
|
|
播放、暂停、恢复播放、播放进度跳转、红点
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 4.文件及目录说明
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
| 路径 | 说明 |
|
|||
|
|
| ---------------------------- | -------------------------------------- |
|
|||
|
|
| index.html | DEMO播放页面文件 |
|
|||
|
|
| /public/player/ | 播放控件脚本 |
|
|||
|
|
| /public/player/cmsplayer.js | cms播放器 |
|
|||
|
|
| /public/player/cmsparser.js | cms解封装器 |
|
|||
|
|
| /public/player/decoder.js | 解码器 |
|
|||
|
|
| /public/player/pcm-player.js | pcm播放器 |
|
|||
|
|
| /public/player/webgl.js | 图像渲染器 |
|
|||
|
|
| /public/images/ | 用到的图片文件夹 |
|
|||
|
|
| /public/js/moment.js | 播放控件用到的js文件 |
|
|||
|
|
| /public/data/ | 本地丛文格式媒体文件，用于DEMO回放演示 |
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 5.集成及接口说明
|
|||
|
|
|
|||
|
|
1. ##### 导入player播放支持组件文件夹；
|
|||
|
|
|
|||
|
|
2. ##### 参考index.html,在播放html页面head导入需要的脚本：
|
|||
|
|
|
|||
|
|
<script src="/public/player/cmsplayer.js"></script>
|
|||
|
|
<script src="/public/player/common.js"></script>
|
|||
|
|
<script src="/public/player/pcm-player.js"></script>
|
|||
|
|
<script src="/public/player/webgl.js"></script>
|
|||
|
|
<script src="/public/player/cmstalk.js"></script>
|
|||
|
|
<script src="/public/player/alawmulaw.js"></script>
|
|||
|
|
<script src="/public/player/recorder-core.js"></script>
|
|||
|
|
<script src="/public/js/moment.js"></script>
|
|||
|
|
|
|||
|
|
3. ##### 初始化播放器控件：
|
|||
|
|
|
|||
|
|
`playerBox` 为 div id：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
self.player = new Player($("#playerBox"));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
4. ##### 播放：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
//url 播放地址
|
|||
|
|
//isLive 是否实时视频
|
|||
|
|
//alarmTime 告警红点时间戳
|
|||
|
|
self.player.play(url, isLive , alarmTime );
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
5. ##### 暂停播放：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
self.player.pause();
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
6. ##### 恢复播放：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
self.player.resume();
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
7. ##### 停止播放：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
self.player.stop();
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
8. ##### 监听开始：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
self.player.startListen();
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
9. ##### 监听结束：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
self.player.stopListen();
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
10. ##### 全屏：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
self.player.fullscreen();
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 6.运行方法
|
|||
|
|
|
|||
|
|
##### 运行整合了win版nginx的
|
|||
|
|
|
|||
|
|
直接运行nginx，然后打开浏览器，输入 http://localhost/index.html
|
|||
|
|
|
|||
|
|
##### 自己运行web服务器的
|
|||
|
|
|
|||
|
|
拷贝 相关文件到 web 网站的根目录。
|
|||
|
|
|
|||
|
|
#####
|