H5 live on-demand player
Download integrated portal: www.liveqing.com/docs/downlo… Instructions: www.liveqing.com/docs/manual…
Custom divs that stack above the video
The div inside the tag is automatically displayed above the video window
< 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>Copy the codePTZ control example
<LivePlayer :muted="muted" :hasaudio="hasAudio" :videoUrl="videoUrl" :poster="poster" :aspect="aspect" live V-loading ="bLoading" :debug="debug" elemental-loading-text =" loading..." 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=" on ">< I class="fa fa-chevron up"></ I ></ div> <div class="ptz-cell ptz-left" @mousedown.prevent="ptzControl('left', $event)" title=" left">< I class="fa fa-chevron left"></ I ></ div> <div class="ptz-center" title=" pTZ-center ">< I class="fa fa-arrows"></i> </div> <div class="ptz-cell ptz-right" @mousedown.prevent="ptzControl('right', $event)" title=" right">< I class="fa fa-chevron right"></ I ></ div> <div class="ptz-cell ptz-down" @mousedown.prevent="ptzControl('down', $event)" title=" down">< I class="fa fa-chevron down"></ I ></ div> <div class="ptz-cell ptz-plus" @mousedown.prevent="ptzControl('zoomin', $event)" title=" minus" >< I class="fa fa-plus-circle"></ I ></ div> <div class="ptz-cell ptz-minus" @mousedown.prevent="ptzControl('zoomout', Put $event) "title =" "> < I class =" fa fa - minus - circle "> < / I > < / div > < / div > < / LivePlayer >Copy the code