HTML 5 пользовательских элементов управления видео в полноэкранном режиме - PullRequest
Новая
       5

HTML 5 пользовательских элементов управления видео в полноэкранном режиме

0 голосов
/ 27 мая 2020

Я создал пользовательские элементы управления для своего HTML5 видеоплеера в моем Angular проекте. Проблема в том, что когда я переключаю полноэкранный режим, я хочу, чтобы элементы управления скрывались, и только при перемещении мыши я хочу, чтобы он отображался. Пожалуйста, помогите мне. Ниже приведен снимок экрана моего текущего видеоплеера в полноэкранном режиме.

enter image description here

Ниже мой файл HTML: 

<div id="main" class="c-video">
    <video (ngInit)="onload()" (timeupdate)="ontimeupdate()" id="video">
        <source [src]="source">
        Your browser does not support the video tag.
    </video>
    <div id="controls">
        <div (click)="seekto($event)" class="bar">
            <div class="juice">
            </div>
        </div>
        <div class="buttons">
            <button id="pbtn" (click)="playpause()"></button>
            <div class="time" *ngIf="timeshow">{{playtime}} / {{timelimit}}</div>
            <!-- <span class="time" id="curtime"></span> / <span class="time" id="durtime">00:00:00</span> -->
        </div>
        <div class="fullscr">
            <span (click)="mute()" id="sound" class="fas fa-volume-up"></span>
            <span (click)="changeres()" id="gear" class="fas fa-cog"></span>
            <span (click)="fill()" id="full" class="fas fa-expand"></span>
        </div>
    </div>
</div>
...