很多使用EasyNVR的客户都希望使用我们的ptz控件来进行控制视频,但是在实际集成中往往有问题,本篇博文将具体介绍一下自定义播放器如何集成ptz空间。
H5直播点播播放器使用说明:https://www.npmjs.com/package/@easydarwin/easyplayer
大家可以根据以上链接参考。下面我们来根据该链接中的内容,来做一下案例复现。
播放器自定义层叠在视频上方的DIV方法
在标签内的div,会自动显示在视频窗口上方,代码如下:
<EasyPlayer id="player01" video-url="http://192.168.2.135:10080/vhls/0XpHAMvWR/0XpHAMvWR_live.m3u8" live="true" aspect="16:9" stretch="true"> <div style="position:absolute;left:15px;top:15px;color:#FFF;">自定义叠加层</div> </EasyPlayer>
云台控制示例代码
<EasyPlayer :muted="muted" :videoUrl="videoUrl" :poster="poster" :aspect="aspect" live :fluent="fluent" :stretch="stretch" :autoplay="autoplay" :controls="controls"> <div class="ptz-block" v-show="ptz"> <div class="ptz-cell ptz-up" @mousedown.prevent="ptzControl('up', $event)" title="上"> <i class="fa fa-chevron-up"></i> </div> <div class="ptz-cell ptz-left" @mousedown.prevent="ptzControl('left', $event)" title="左"> <i class="fa fa-chevron-left"></i> </div> <div class="ptz-center" title="云台控制"> <i class="fa fa-arrows"></i> </div> <div class="ptz-cell ptz-right" @mousedown.prevent="ptzControl('right', $event)" title="右"> <i class="fa fa-chevron-right"></i> </div> <div class="ptz-cell ptz-down" @mousedown.prevent="ptzControl('down', $event)" title="下"> <i class="fa fa-chevron-down"></i> </div> <div class="ptz-cell ptz-plus" @mousedown.prevent="ptzControl('zoomin', $event)" title="缩"> <i class="fa fa-plus-circle"></i> </div> <div class="ptz-cell ptz-minus" @mousedown.prevent="ptzControl('zoomout', $event)" title="放"> <i class="fa fa-minus-circle"></i> </div> </div> </EasyPlayer>
云台ptz相关css示例:
.ptz-block { position: absolute; z-index: 99999; 150px; height: 220px; right: 20px; top: 20px; text-align: center; font-size: 24px; background: fade(#eee, 0%); border-radius: 16px; overflow: hidden; &:hover { background: fade(#eee, 60%); .ptz-cell, .ptz-cells { display: block; } } .ptz-cells, .ptz-cell { 50px; height: 50px; line-height: 50px; position: absolute; cursor: pointer; display: none; } .ptz-cell.active { color: #ccc; font-size: 26px; } .ptz-center { top: 120px; left: 50px; 50px; height: 50px; line-height: 50px; position: absolute; border-radius: 25px; background: fade(#ccc, 20%); cursor: move; i { color: fade(#000, 30%); } } .ptz-up { top: 70px; left: 50px; } .ptz-left { top: 120px; left: 0; } .ptz-right { top: 120px; left: 100px; } .ptz-down { top: 165px; left: 50px; } .ptz-plus { top: 25px; left: 5px; } .ptz-speed { left: 52px; 45px; top: 20px; .el-input-number--mini { 50px; color: fade(#000, 30%); } } .ptz-minus { top: 25px; left: 95px; } }
效果展示:
关于EasyPlayer播放器
EasyPlayer是一款流媒体播放器系列项目, 支持RTSP、RTMP、HTTP、HLS、UDP、RTP、File等多种流媒体协议播放、 支持本地文件播放,支持本地抓拍、本地录像、播放旋转、多屏播放、 倍数播放等多种功能特性,核心基于ffmpeg,稳定、高效、可靠、可控。
EasyPlayer播放器系列项目提供了非常简单易用的SDK及API接口,用户通过API调用就可以非常快速地开发出属于自己的应用程序,进行第二次开发。如果对该项目感兴趣,可以联系我们,也可以访问TSINGSEE青犀视频详细了解。