H5|HTTP-FLV|WS-FLV|HLS|RTMP免費直播點播播放器如何自定義層疊DIV全屏后顯示在視頻上方

H5直播點播播放器

下載集成入口： https://www.liveqing.com/docs/download/LivePlayer.html
使用說明：https://www.liveqing.com/docs/manuals/LivePlayer.html

自定義層疊在視頻上方的DIV

在標簽內的div，會自動顯示在視頻窗口上方

<live-player 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>
</live-player>

雲台控制示例

 <LivePlayer :muted="muted" :hasaudio="hasAudio" :videoUrl="videoUrl" :poster="poster" :aspect="aspect" live v-loading="bLoading" :debug="debug"
     element-loading-text="加載中..." element-loading-background="#000" :loading.sync="bLoading" @message="$message"
     :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>
 </LivePlayer>

全屏后效果展示