### 丛文CMS视频WEB播放器

#### 1.简介

该Demo项目，目前支持丛文cms格式封装的基于H264\H265压缩格式的实时视频流，录像视频文件以及录像图片文件的播放。

#### 2.操作界面介绍

![](/home/ramon/Pictures/realplayscreen.png)

##### 播放实时视频（本地模拟流）

此按钮为播放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 网站的根目录。

#####