<aside> <img src="/icons/bookmark_purple.svg" alt="/icons/bookmark_purple.svg" width="40px" />

목차

</aside>

개요

<aside> <img src="/icons/bell_blue.svg" alt="/icons/bell_blue.svg" width="40px" />

커스텀 플레이어 컨트롤러 개발의 목적

공유자, 방장에게만 동영상 흐름 조작 권한을 주면서 볼륨 조절, 시간 확인 등의 플레이어 기능은 다른 사용자들도 이용 가능해야 함 + iframe 내부는 다른 브라우징 컨텍스트라 DOM이나 컨트롤러 자체에 접근이 어려움.

⇒ 요구사항을 만족시키기 위해선 커스텀 플레이어 컨트롤러를 개발해야겠다!

</aside>

1. 기본 플레이어 동작 막기

플레이어를 커스텀하기 위해선 기존 플레이어의 동작을 차단해야 한다. 기존 유튜브 플레이어를 조작할 수 있는 방법은

• 컨트롤러 조작
• 키보드로 조작
• 동영상 클릭
• Seek Bar 조작

가 존재했다. 두 번째 요소를 제외하곤 전부 마우스 이벤트와 관련된 방법이다. 즉 막아야 하는 건 마우스 이벤트 + 키보드 이벤트이다.

마우스 이벤트 막기 + 키보드 이벤트 막기

iframe 내부 DOM은 cross origin 제약때문에 접근할 수 없다. wrapper 요소를 만든 뒤, 해당 요소에서 이벤트 캡처링 단계에서 이벤트를 잡고 전파를 막는 방법도 내부 Document로의 전파는 막을 수 없어 불가능하다. 제약때문에 이 부분에서 시간을 꽤 많이 썼는데, 의외로 해결법은 간단했다.

 <ReactPlayer
    style={{pointerEvents: "none"}}
    ...
 />

react player는 prop으로 style을 받는다. 해당 prop에 pointer-event: ‘none’을 주면 video 태그를 덮어서 감싸고 있는 요소가 마우스 이벤트를 차단하는 상태가 된다. 캡처링 단계에서 잡는 것과의 차이가 뭐길래 이건 되는 걸까? 나름대로 추측해보자면 캡처링 단계에선 어쨌든 플레이어가 있는 부분을 클릭했다는 건 iframe 내부로 전달이 되지만, 마우스 이벤트를 아예 차단해버리면 아예 전달조차 되지 않기 때문이 아닐까? 싶다.

어쨌든 해당 코드를 추가하면 마우스 이벤트를 막을 수 있게 되는데, 마우스 이벤트 자체가 불가능해지면서 플레이어를 선택하는 것도 불가능해진다. 유튜브 플레이어의 키보드 이벤트는 플레이어를 선택한 상태에서 작동하기 때문에, 이 시점에서 키보드 이벤트도 자동으로 차단된다!