[javascript] 콘텍스트 메뉴를 사용한 동영상 플레이어 구현하기

11 Dec 2023

javascript

동영상 플레이어를 만들 때, 사용자가 마우스 오른쪽 버튼을 클릭했을 때 콘텍스트 메뉴를 통해 다양한 기능을 제공하고 싶을 것입니다. 오늘은 JavaScript를 사용하여 동영상 플레이어에 콘텍스트 메뉴를 추가하는 방법에 대해 알아보겠습니다.

콘텍스트 메뉴 생성하기

먼저, HTML 파일에 video 태그를 사용하여 동영상 플레이어를 만듭니다. 그런 다음, JavaScript 코드를 사용하여 콘텍스트 메뉴를 생성합니다.

// 콘텍스트 메뉴 생성
video.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  const menu = document.createElement('div');
  menu.classList.add('context-menu');
  menu.innerHTML = `
    <ul>
      <li>재생</li>
      <li>일시정지</li>
      <li>볼륨 조절</li>
    </ul>
  `;
  menu.style.top = `${e.clientY}px`;
  menu.style.left = `${e.clientX}px`;
  document.body.appendChild(menu);

  // 메뉴 숨기기
  document.addEventListener('click', function() {
    menu.style.display = 'none';
  });
});

위 코드에서는 contextmenu 이벤트를 사용하여 마우스 오른쪽 버튼 클릭 시 콘텍스트 메뉴를 생성합니다. 메뉴는 div 요소를 생성하고, 위치는 마우스 클릭 위치에 따라 동적으로 조절됩니다.

콘텍스트 메뉴에 기능 추가하기

콘텍스트 메뉴에 기능을 추가하기 위해서는 각 메뉴 아이템에 대한 클릭 이벤트를 처리해야 합니다. 예를 들어, ‘재생’ 메뉴를 클릭했을 때 동영상을 재생하도록 하는 등의 작업을 수행할 수 있습니다.

// 콘텍스트 메뉴에 기능 추가
document.querySelector('.context-menu ul').addEventListener('click', function(e) {
  if (e.target.textContent === '재생') {
    video.play();
  } else if (e.target.textContent === '일시정지') {
    video.pause();
  } else if (e.target.textContent === '볼륨 조절') {
    // 볼륨 조절 기능 추가
  }
});

위 코드는 콘텍스트 메뉴의 각 메뉴 아이템을 클릭했을 때 해당 기능을 수행하도록 핸들러를 추가하는 방법을 보여줍니다.

결론

이제 동영상 플레이어에 콘텍스트 메뉴를 추가하는 방법에 대해 알아보았습니다. 이를 통해 사용자가 동영상을 더 쉽게 제어할 수 있게 되며, 보다 풍부한 사용자 경험을 제공할 수 있습니다. 이러한 UI/UX 요소는 웹 애플리케이션을 개발할 때 중요한 부분이므로, 유용하게 활용할 수 있을 것입니다.

참고 자료: MDN Web Docs - Context menu