비디오에 포커스를 추가하여 원하지 않는 스페이스 바 스크롤을 비활성화하십시오.

Question

비디오 플레이어에서 나는 항상 스페이스 바를 일시 중지하기를 원합니다. 이것은 일어나지 않습니다.

문제 - 먼저 클릭하지 않으면 페이지가 예기치 않게 작동합니다. 비디오를 일시 중지하는 대신 스페이스 바를 사용하여 페이지를 아래로 스크롤합니다.

내 시도 - 비디오 플레이어를 클릭하면 비디오 플레이어와 관련된 여러 div 중 하나에 표시 속성이 none에서 block으로 변경되었습니다. 나는이 페이지 동작합니다 그것은 클래스를 변경하지만 페이지 동작을 변경하지 않습니다 제대로

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

을 만들 것입니다 있는지 확인하기 위해이 추가되었습니다. 이것은 어둠 속에서 비디오를 토글 할 수있는 부분에 불과한 것으로, 작동하지 않습니다.

페이지를 클릭하면 어떤 속성이 변경되는지 어떻게 알 수 있습니까? 그래서 나는 무엇이 플레이어를 집중 시켰는지 알아낼 수 있습니다. 그래서 비디오에 포커스가있는 페이지로드를 만들 수 있습니다 (브라우저 확장을 사용하는 것 같습니까?) 아니면 그냥 일반 how to do I solve this problem입니다.

Answer 1

먼저 페이지를 클릭했을 때 어떤 일이 일어나고 있는지 확인하려면 브라우저의 개발자 도구를 사용할 수 있습니다.

예 : 크롬에서 페이지를 마우스 오른쪽 버튼으로 클릭하고> 검사> 상단의 요소 탭에 있는지 확인합니다.

그런 다음 개발 도구의 왼쪽 상단에있는 "페이지에서 요소 선택"도구 (또는 Ctrl + Shift + C)를 사용하여 onclick 속성을 볼 페이지에서 요소를 선택하십시오.

dev 도구에서 아래쪽이나 오른쪽으로 가면 "이벤트 리스너"라는 탭이 나타납니다. 이 요소를 클릭하면 요소가 사용자로부터 무엇을 응답하는지 확인할 수 있습니다. 아마 "클릭"이라고하는 것이있을 것입니다. 자세한 정보를 보려면 이것을 클릭하십시오. 페이지를 스크롤에서 스페이스 바를 중지하려면

---

둘째, 그냥 다음을 사용 :

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

여기

e.preventDefault 스크롤에서 페이지를 중지 라인입니다.