Como personalizar o player H5 gratuito ao vivo sob demanda para exibição na parte superior do vídeo após cascatear DIV em tela inteira?

Muitos clientes que usam EasyNVR desejam usar nosso controle de ptz para controlar o vídeo, mas muitas vezes há problemas na integração real. Esta postagem de blog apresentará especificamente como players personalizados integram espaço de ptz.

Instruções do jogador H5 ao vivo sob demanda: https://www.npmjs.com/package/@easydarwin/easyplayer
Você pode consultar o link acima. Vamos reproduzir o caso com base no conteúdo do link.

O player personaliza o método DIV em camadas sobre o vídeo

O div na tag será exibido automaticamente acima da janela do vídeo, o código é o seguinte:

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

Código de amostra de controle PTZ

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

Exemplo de css relacionado a PTZ:

.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;
  }
}

Mostrar resultados:

Sobre o EasyPlayer player

EasyPlayer é uma série de projetos de reprodutor de mídia de streaming, suporta RTSP, RTMP, HTTP, HLS, UDP, RTP, reprodução de arquivos e outros protocolos de mídia de streaming, suporta reprodução de arquivo local, captura local, vídeo local, rotação de reprodução, multi-tela O núcleo é baseado no ffmpeg, que é estável, eficiente, confiável e controlável.

O projeto da série EasyPlayer player fornece uma interface SDK e API muito simples e fácil de usar. Os usuários podem desenvolver rapidamente seus próprios aplicativos por meio de chamadas de API para o segundo desenvolvimento. Se você estiver interessado neste projeto, pode entrar em contato conosco ou visitar o Vídeo TSINGSEE Qingxi para saber mais.