丛文CMS视频WEB播放器

1.简介

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

2.操作界面介绍

播放实时视频(本地模拟流)

此按钮为播放web服务器端一个本地丛文媒体流文件,适用于没有丛文服务器环境下,了解丛文web视频播放控件。

播放录像文件(本地模拟流)

此按钮为回放web服务器端一个本地丛文媒体流文件,适用于没有丛文服务器环境下,了解丛文web视频播放控件。

播放实时视频(请配置URL)

此按钮为播放实时视频,需要配合丛文服务器,需要配置从视频输出网关获取的视频拉取url。

播放视频对讲(请配置URL)

此按钮为播放实时视频并提供对讲功能,需要配合丛文服务器,需要配置从视频输出网关获取的视频拉取url和对讲url。

需要先配置好上面的视频拉取url,然后配置下面的对讲rul,先拉取视频,才可以点击对讲按钮,进行对讲。

播放录像文件(请配置URL)

此按钮为回放录像文件,需要配合丛文服务器,需要配置从视频输出网关获取的录像文件拉取url。

 

3.功能说明

4.文件及目录说明

 

路径说明
index.htmlDEMO播放页面文件
/public/player/播放控件脚本
/public/player/cmsplayer.jscms播放器
/public/player/cmsparser.jscms解封装器
/public/player/decoder.js解码器
/public/player/pcm-player.jspcm播放器
/public/player/webgl.js图像渲染器
/public/images/用到的图片文件夹
/public/js/moment.js播放控件用到的js文件
/public/data/本地丛文格式媒体文件,用于DEMO回放演示

 

5.集成及接口说明

  1. 导入player播放支持组件文件夹;
  2. 参考index.html,在播放html页面head导入需要的脚本:
  3. 初始化播放器控件:

    playerBox 为 div id:

    self.player = new Player($("#playerBox"));
    
  4. 播放:
    //url 播放地址
    //isLive 是否实时视频
    //alarmTime 告警红点时间戳
    self.player.play(url,  isLive , alarmTime	);
    
  5. 暂停播放:
    self.player.pause(); 
    
  6. 恢复播放:
    self.player.resume(); 
    
  7. 停止播放:
    self.player.stop(); 
    
  8. 监听开始:
    self.player.startListen();
    
  9. 监听结束:
    self.player.stopListen();
    
  10. 全屏:
    self.player.fullscreen();
    

6.运行方法

运行整合了win版nginx的

直接运行nginx,然后打开浏览器,输入 http://localhost/index.html

自己运行web服务器的

拷贝 相关文件到 web 网站的根目录。