Fokus auf Video hinzufügen, um unerwünschte Leertaste zu deaktivieren, blättern

Question

In einem Video-Player möchte ich immer die Leertaste anhalten. Das passiert nicht.

Das Problem - Ohne zuerst zu klicken, verhält sich die Seite unerwartet. Anstatt das Video anzuhalten, lässt die Leertaste die Seite nach unten scrollen.

Mein Versuch zu lösen - Wenn der Video-Player angeklickt wird, habe ich festgestellt, Display-Eigenschaft auf einer der vielen divs mit dem Video-Player von none zu block. Ich fügte hinzu, dies zu sehen, ob dies die Seite verhalten sich richtig

if(videoPlayer.style.display === "none"){ 
    videoPlayer.style.display = "block" 
} 

Es die Klasse ändert machen würde, verändert aber nicht die Seiten Verhalten. Dies war nur eine Einstellung im Dunkeln, um das Video zu wechseln, und funktioniert nicht.

Wie kann ich herausfinden, welche Eigenschaften sich ändern, wenn ich auf die Seite klicke? So kann ich herausfinden, was bringt den Spieler in den Fokus. Und damit ich etwas schreiben kann, um die Seite mit dem Video im Fokus zu laden (ich vermute mit einer Browser-Erweiterung?) Oder einfach how to do I solve this problem.

Answer 1

Um herauszufinden, was passiert, wenn Sie auf die Seite klicken, können Sie zunächst die Entwicklertools Ihres Browsers verwenden.

. In Chrome klicken Sie mit der rechten Maustaste auf die Seite> Inspect> Stellen Sie sicher, dass Sie sich auf der Registerkarte Elemente oben befinden.

Verwenden Sie dann das Werkzeug "Element in der Seite auswählen" oben links in den Entwicklungstools (oder Strg + Umschalt + C), um das Element auf der Seite auszuwählen, für das Sie die onclick-Eigenschaften sehen möchten.

In den Dev-Tools entweder in der Nähe der unteren oder nach rechts sollten Sie eine Registerkarte namens "Event Listeners" sehen. Klicken Sie darauf, um zu sehen, auf was das Element vom Benutzer reagiert. Dort wird es wahrscheinlich einen geben, der "Klick" genannt wird; Klicken Sie darauf, um mehr Informationen zu sehen.

---

Zweitens, wenn Sie die Leertaste von Scrollen der Seite stoppen möchten, benutzen Sie einfach die folgenden Schritte aus:

document.onkeydown = function(e){ 
    if(e.key == " " && e.target == document.body){ 
    e.preventDefault; 
    //Spacebar pressed 
    //Place function here to pause the video 
    } 
} 

Hier e.preventDefault ist die Linie, die die Seite von Scrollen stoppt.