Ich mache einen benutzerdefinierten Video-Player, in dem es eine Überlagerung gibt, die die Steuerelemente des Video-Players enthält

Mein Player beginnt in voller Länge und Höhe zu arbeiten.

Jetzt möchte ich die Überlagerung nach 5 Sekunden ausblenden. Ich halte die Maus an.

Jetzt besteht das Problem darin, dass die Synchronisation des Timers beeinträchtigt wird, wenn die folgende Funktion mit der Maus in der .ts-Datei aufgerufen wird.

Wenn ich also meine Maus kontinuierlich bewege, beginnt das Overlay zu flackern.

Bitte geben Sie mir die Lösung für das Problem.

Folgendes ist mein HTML-Code

<div class="video-container" #videoFullscreen>
    <div class="video-wrapper" mouse-move>
      <video class="video video-js" data-dashjs-player  id="myVideo"  autoplay #videoPlayer>
        <source src="{{ videoSource }}" type="video/mp4" />
      </video>


      <!-- overlay -->
      <div class="overlay" [class.hideOverlay]="hideTop">  
        <!-- top controls  -->
          .
          .
          <!-- lower controls  -->

        </div>
      </div>

Dies ist mein Typ Skript Code

@HostListener('document:mousemove', [ '$event' ]) //fuction to display and hide element sue to mouseover
    onMouseMove($event) {
            this.hideTop = false;
            setTimeout(() => {
                this.hideTop = true;
            }, 5000);
    }

Das ist mein CSS-Code:

.overlay {
    display: flex;
}
.hideOverlay {
    display:none;
}

Bitte helfen Sie mir, dieses Problem zu lösen.

0
Shubham Sharma 19 Feb. 2020 im 19:58

3 Antworten

Beste Antwort

Eine gute Lösung wäre, rxjs zu verwenden, um dies wie unten gezeigt zu lösen:

ngOnInit(): void {
    fromEvent<MouseEvent>(document, 'mousemove').pipe(tap(() => {
      console.log("show it!");
      this.hideTop = false
    }), switchMap((event) =>
      timer(5000).pipe(tap(() => {
        console.log("hideit");
        this.hideTop = true;
      }))
    )).subscribe();
  }

Vergessen Sie nicht, sich abzumelden, wenn Ihre Komponente zerstört wird, um Speicherlecks zu vermeiden!

Zuerst machen wir ein Observable aus dem documents mousemove Ereignis. Wenn das Ereignis ausgelöst wird, setzen wir hideTop auf true. Und hier kommt der interessante Teil: Wir verwenden switchMap mit einem timer Observable. switchMap wird automatisch vom inneren Observable abgemeldet, wenn der äußere einen neuen Wert ausgibt. Daher wird das innere Observable erst ausgegeben, nachdem der Benutzer die Maus 5 Sekunden lang nicht mehr bewegt hat.

0
Max K 19 Feb. 2020 im 17:46

Speichern Sie die lastHover-Zeit und vergleichen Sie sie damit.

private lastHover = 0;
@HostListener(...)
onMouseMove($event) {
    this.lastHover = new Date().getTime()
    This.hideTop = true;
    setTimeout( () => {
        ...
        if(lastHover + 5000 < new Date().getTime()) {
            This.hideTop = true;
        }
    }, 5000)
}
0
Ethan Melamed 19 Feb. 2020 im 17:41

Entschuldigung, dass meine Antwort in jQuery ist, aber das Konzept ist ziemlich einfach

Wir müssen überprüfen, ob das Timeout-Ereignis bereits ausgelöst wurde, und es während dieser Zeit auf ein Mausbewegungsereignis zurücksetzen. Dazu wird überprüft, ob die Klasse zum Ausblenden des Elements angewendet wird oder nicht


//Timer variable
var timer;
//Detect mousemove event on parent element
$("html").on("mousemove", "#outer", function() {

//Is the element already hidden?
  if ($("#inner").hasClass("hide")) {
  //Show the element
    $("#inner").removeClass("hide")
  } else {
  //Reset the timer to 5 seconds
    clearTimeout(timer);
    timer = setTimeout(hideBox, 5000);
  }
})


function hideBox() {
  $("#inner").addClass("hide")
}

https://jsfiddle.net/xcL52zf3/1/

Sie müssen die jQuery-Ereignishandler und das Element-Targeting gegen das Äquivalent für Ihre TypeScript-Bibliothek austauschen

0
DAustin 19 Feb. 2020 im 17:47