105 lines
5.5 KiB
HTML
105 lines
5.5 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
|
|||
|
|
<title>README</title>
|
|||
|
|
</head>
|
|||
|
|
<body><h3 id='丛文cms视频web播放器'>丛文CMS视频WEB播放器</h3>
|
|||
|
|
<h4 id='1简介'>1.简介</h4>
|
|||
|
|
<p>该Demo项目，目前支持丛文cms格式封装的基于H264\H265压缩格式的实时视频流，录像视频文件以及录像图片文件的播放。</p>
|
|||
|
|
<h4 id='2操作界面介绍'>2.操作界面介绍</h4>
|
|||
|
|
<p><img src="/public/help/realplayscreen.png" referrerpolicy="no-referrer"></p>
|
|||
|
|
<h5 id='播放实时视频本地模拟流）'>播放实时视频（本地模拟流）</h5>
|
|||
|
|
<p>此按钮为播放web服务器端一个本地丛文媒体流文件，适用于没有丛文服务器环境下，了解丛文web视频播放控件。</p>
|
|||
|
|
<h5 id='播放录像文件本地模拟流）'>播放录像文件（本地模拟流）</h5>
|
|||
|
|
<p>此按钮为回放web服务器端一个本地丛文媒体流文件，适用于没有丛文服务器环境下，了解丛文web视频播放控件。</p>
|
|||
|
|
<h5 id='播放实时视频请配置url）'>播放实时视频（请配置URL）</h5>
|
|||
|
|
<p>此按钮为播放实时视频，需要配合丛文服务器，需要配置从视频输出网关获取的视频拉取url。</p>
|
|||
|
|
<h5 id='播放视频对讲请配置url）'>播放视频对讲（请配置URL）</h5>
|
|||
|
|
<p>此按钮为播放实时视频并提供对讲功能，需要配合丛文服务器，需要配置从视频输出网关获取的视频拉取url和对讲url。</p>
|
|||
|
|
<p>需要先配置好上面的视频拉取url，然后配置下面的对讲rul，先拉取视频，才可以点击对讲按钮，进行对讲。</p>
|
|||
|
|
<h5 id='播放录像文件请配置url）'>播放录像文件（请配置URL）</h5>
|
|||
|
|
<p>此按钮为回放录像文件，需要配合丛文服务器，需要配置从视频输出网关获取的录像文件拉取url。</p>
|
|||
|
|
<p> </p>
|
|||
|
|
<h4 id='3功能说明'>3.功能说明</h4>
|
|||
|
|
<ul>
|
|||
|
|
<li><p>实时视频</p>
|
|||
|
|
<p>播放、暂停、恢复播放、监听、对讲、全屏</p>
|
|||
|
|
</li>
|
|||
|
|
<li><p>录像视频</p>
|
|||
|
|
<p>播放、暂停、恢复播放、播放进度跳转</p>
|
|||
|
|
</li>
|
|||
|
|
<li><p>图片回放</p>
|
|||
|
|
<p>播放、暂停、恢复播放、播放进度跳转、红点</p>
|
|||
|
|
<p> </p>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
<h4 id='4文件及目录说明'>4.文件及目录说明</h4>
|
|||
|
|
<p> </p>
|
|||
|
|
<figure><table>
|
|||
|
|
<thead>
|
|||
|
|
<tr><th>路径</th><th>说明</th></tr></thead>
|
|||
|
|
<tbody><tr><td>index.html</td><td>DEMO播放页面文件</td></tr><tr><td>/public/player/</td><td>播放控件脚本</td></tr><tr><td>/public/player/cmsplayer.js</td><td>cms播放器</td></tr><tr><td>/public/player/cmsparser.js</td><td>cms解封装器</td></tr><tr><td>/public/player/decoder.js</td><td>解码器</td></tr><tr><td>/public/player/pcm-player.js</td><td>pcm播放器</td></tr><tr><td>/public/player/webgl.js</td><td>图像渲染器</td></tr><tr><td>/public/images/</td><td>用到的图片文件夹</td></tr><tr><td>/public/js/moment.js</td><td>播放控件用到的js文件</td></tr><tr><td>/public/data/</td><td>本地丛文格式媒体文件，用于DEMO回放演示</td></tr></tbody>
|
|||
|
|
</table></figure>
|
|||
|
|
<p> </p>
|
|||
|
|
<h4 id='5集成及接口说明'>5.集成及接口说明</h4>
|
|||
|
|
<ol start='' >
|
|||
|
|
<li><h5 id='导入player播放支持组件文件夹'>导入player播放支持组件文件夹；</h5>
|
|||
|
|
</li>
|
|||
|
|
<li><h5 id='参考indexhtml在播放html页面head导入需要的脚本'>参考index.html,在播放html页面head导入需要的脚本：</h5>
|
|||
|
|
<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>
|
|||
|
|
</li>
|
|||
|
|
<li><h5 id='初始化播放器控件'>初始化播放器控件：</h5>
|
|||
|
|
<p><code>playerBox</code> 为 div id：</p>
|
|||
|
|
<pre><code class='language-javascript' lang='javascript'>self.player = new Player($("#playerBox"));
|
|||
|
|
</code></pre>
|
|||
|
|
</li>
|
|||
|
|
<li><h5 id='播放'>播放：</h5>
|
|||
|
|
<pre><code class='language-javascript' lang='javascript'>//url 播放地址
|
|||
|
|
//isLive 是否实时视频
|
|||
|
|
//alarmTime 告警红点时间戳
|
|||
|
|
self.player.play(url, isLive , alarmTime );
|
|||
|
|
</code></pre>
|
|||
|
|
</li>
|
|||
|
|
<li><h5 id='暂停播放'>暂停播放：</h5>
|
|||
|
|
<pre><code class='language-javascript' lang='javascript'>self.player.pause();
|
|||
|
|
</code></pre>
|
|||
|
|
</li>
|
|||
|
|
<li><h5 id='恢复播放'>恢复播放：</h5>
|
|||
|
|
<pre><code class='language-javascript' lang='javascript'>self.player.resume();
|
|||
|
|
</code></pre>
|
|||
|
|
</li>
|
|||
|
|
<li><h5 id='停止播放'>停止播放：</h5>
|
|||
|
|
<pre><code class='language-javascript' lang='javascript'>self.player.stop();
|
|||
|
|
</code></pre>
|
|||
|
|
</li>
|
|||
|
|
<li><h5 id='监听开始'>监听开始：</h5>
|
|||
|
|
<pre><code class='language-javascript' lang='javascript'>self.player.startListen();
|
|||
|
|
</code></pre>
|
|||
|
|
</li>
|
|||
|
|
<li><h5 id='监听结束'>监听结束：</h5>
|
|||
|
|
<pre><code class='language-javascript' lang='javascript'>self.player.stopListen();
|
|||
|
|
</code></pre>
|
|||
|
|
</li>
|
|||
|
|
<li><h5 id='全屏'>全屏：</h5>
|
|||
|
|
<pre><code class='language-javascript' lang='javascript'>self.player.fullscreen();
|
|||
|
|
</code></pre>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
</ol>
|
|||
|
|
<h4 id='6运行方法'>6.运行方法</h4>
|
|||
|
|
<h5 id='运行整合了win版nginx的'>运行整合了win版nginx的</h5>
|
|||
|
|
<p>直接运行nginx，然后打开浏览器，输入 <a href='http://localhost/index.html' target='_blank' class='url'>http://localhost/index.html</a></p>
|
|||
|
|
<h5 id='自己运行web服务器的'>自己运行web服务器的</h5>
|
|||
|
|
<p>拷贝 相关文件到 web 网站的根目录。</p>
|
|||
|
|
<h5 ></h5>
|
|||
|
|
</body>
|
|||
|
|
</html>
|