[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 마우스 클릭 시 효과 추가하는 방법은 어떻게 되나요?

Video.js를 사용하여 동영상 재생 중에 플레이어에 마우스 클릭 시 효과를 추가하는 방법은 간단합니다. Video.js는 재생 컨트롤러와 이벤트를 쉽게 처리할 수 있는 API를 제공합니다. 다음은 마우스 클릭 시 효과를 추가하는 예제 코드입니다:

var player = videojs('my-video');

player.on('click', function() {
  // 마우스 클릭 시 효과 추가
  player.addClass('clicked');
});

위의 코드에서 'my-video'는 Video.js로 생성한 플레이어의 ID를 나타냅니다. 클릭 이벤트가 발생하면 addClass() 메서드를 사용하여 'clicked' 클래스를 플레이어에 추가할 수 있습니다.

이제 clicked 클래스를 CSS로 스타일링하여 원하는 효과를 구현할 수 있습니다:

#my-video.clicked {
  /* 클릭 시 효과 CSS 스타일링 */
  border: 2px solid red;
  /* 원하는 효과 추가 */
}

위의 코드에서는 #my-video.clicked 선택자를 사용하여 clicked 클래스가 적용된 경우에만 특정 스타일을 적용합니다.

참고로, Video.js의 click 이벤트 외에도 다양한 이벤트를 활용하여 플레이어 상호 작용을 구현할 수 있습니다. 자세한 내용은 Video.js 공식 문서를 참조하시기 바랍니다.

참고 문서: Video.js 이벤트 핸들링 문서 ```