Plyr은 웹에서 동영상을 재생하는 데 도움이 되는 유용한 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하여 동영상 플레이어에 로고나 워터마크를 추가하는 방법을 알아보겠습니다.

Plyr 설치하기

Plyr을 사용하려면 먼저 해당 라이브러리를 다운로드하고 프로젝트에 포함해야 합니다. 일반적으로 npm을 사용하여 설치할 수 있습니다.

npm install plyr

또는 다운로드한 파일을 HTML 문서에 포함시킬 수도 있습니다.

<script src="path/to/plyr.js"></script>
<link rel="stylesheet" href="path/to/plyr.css" />

Plyr 플레이어 생성하기

Plyr 플레이어를 생성하려면 HTML 요소를 만들고 Plyr 객체를 인스턴스화해야 합니다.

<video id="player" src="path/to/video.mp4" controls></video>

<script>
  const player = new Plyr('#player');
</script>

위 코드에서 #player는 비디오 요소의 ID입니다. Plyr은 이 요소를 기반으로 플레이어를 생성합니다.

로고나 워터마크 추가하기

비디오에 로고나 워터마크를 추가하려면 Plyr 플레이어의 on 이벤트를 사용해야 합니다. 이벤트를 등록하고, 비디오가 재생될 때마다 워터마크 이미지를 표시할 수 있습니다.

player.on('play', () => {
  const watermark = document.createElement('div');
  watermark.innerHTML = '<img src="path/to/logo.png" />';
  watermark.style.position = 'absolute';
  watermark.style.bottom = '10px';
  watermark.style.right = '10px';

  const playerContainer = document.querySelector('.plyr--video');

  playerContainer.appendChild(watermark);
});

위 코드에서는 play 이벤트가 발생할 때마다 워터마크 이미지를 추가하도록 설정되어 있습니다. 이 코드에서는 위치를 조정할 수 있도록 position, bottom, right 스타일 속성을 사용하였습니다. path/to/logo.png는 실제 로고 파일의 경로로 대체되어야 합니다.

워터마크 스타일 설정하기

추가된 워터마크의 스타일을 변경하려면 CSS를 사용할 수 있습니다. 워터마크의 위치, 크기, 투명도 등을 조정할 수 있습니다. 예를 들어, 다음 CSS 코드를 사용하여 워터마크를 어둡게 만들 수 있습니다.

.plyr--video div {
  opacity: 0.5;
}

위의 코드는 플레이어의 클래스에 속한 div 요소의 투명도를 설정합니다. 스타일을 변경할 때에는 약간의 실험이 필요할 수 있으므로 원하는 결과를 얻기 위해 스타일링을 조정해 보세요.

결론

Plyr을 사용하면 동영상 플레이어에 로고나 워터마크를 쉽게 추가할 수 있습니다. 위의 예시 코드를 참조하여 원하는 스타일 및 로고 이미지를 적용해 보세요. Plyr은 다양한 기능과 옵션을 제공하기 때문에, 필요에 맞게 활용해 보세요.

더 많은 정보와 옵션은 Plyr 공식 문서를 참조하시기 바랍니다.