How to customize the H5 free live on-demand player to display on top of the video after cascading DIV in full screen?

Many customers who use EasyNVR want to use our ptz control to control video, but there are often problems in actual integration. This blog post will specifically introduce how custom players integrate ptz space.

H5 live on-demand player instructions: https://www.npmjs.com/package/@easydarwin/easyplayer
You can refer to the link above. Let's reproduce the case based on the content in the link.

The player customizes the DIV method layered on top of the video

The div in the tag will be automatically displayed above the video window, the code is as follows:

        <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>

PTZ control sample code

        <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 related css example:

.ptz-block {
  position: absolute;
  z-index: 99999;
  width: 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 {
    width: 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;
    width: 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;
    width: 45px;
    top: 20px;
    .el-input-number--mini {
      width: 50px;
      color: fade(#000, 30%);
    }
  }
  .ptz-minus {
    top: 25px;
    left: 95px;
  }
}

Show results:

About EasyPlayer player

EasyPlayer is a series of streaming media player projects, supports RTSP, RTMP, HTTP, HLS, UDP, RTP, File and other streaming media protocol playback, supports local file playback, supports local capture, local video, playback rotation, multi-screen The core is based on ffmpeg, which is stable, efficient, reliable and controllable.

The EasyPlayer player series project provides a very simple and easy-to-use SDK and API interface. Users can quickly develop their own applications through API calls for the second development. If you are interested in this project, you can contact us, or visit TSINGSEE Qingxi Video to learn more.