problem description
the custom video control bar has full-screen buttons, and the full-screen event has been written, but after entering the full-screen control bar, the event at the bottom of the control bar is invalid, and the click is invalid, which shows the video playback and pause events. The control bar is invisible, so z-index is used to improve the level.
the environmental background of the problems and what methods you have tried
I thought it was the bubbling of the event, but it was useless to prevent it from bubbling. Finally, I found that the click event I set did not trigger at all after the full screen.
related codes
/ / Please paste the code text below (do not replace the code with pictures)
<video-player class="video-player-box"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
customEventName="customstatechangedeventname"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@loadeddata="onPlayerLoadeddata($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@statechanged="playerStateChanged($event)"
@ready="playerReadied"
@on-change="progressChange"
>
</video-player>
<div class="fullScreen vjs-fullscreen-control vjs-control vjs-button"
aria-live="polite" @click="fullScreenHandle" aria-disabled="false">
</div>
/ / full screen
fullScreenHandle(){
console.log("111111")
if(!this.player.isFullscreen()){
this.player.requestFullscreen();
this.player.isFullscreen(true);
}else{
this.player.exitFullscreen();
this.player.isFullscreen(false);
}
},what result do you expect? What is the error message actually seen?
I hope the self-defined events can be executed normally after full screen. Now the error is that the event was not triggered