소개

Plyr은 JavaScript로 작성된 강력한 동영상 플레이어 라이브러리입니다. 이 라이브러리를 사용하면 동영상 플레이어의 사용자 이름과 아바타를 손쉽게 UI에 표시할 수 있습니다. 이 글에서는 Plyr을 사용하여 동영상 플레이어 UI에서 사용자 이름과 아바타를 표시하는 방법에 대해 알아보겠습니다.

Plyr 설치하기

Plyr을 사용하기 위해 먼저 Plyr 라이브러리를 설치해야 합니다. 다음 명령을 사용하여 Plyr을 프로젝트에 추가합니다.

npm install plyr

사용자 이름 및 아바타 표시하기

1. Plyr 라이브러리를 가져와서 사용자 이름과 아바타를 표시할 요소를 선택합니다.

import Plyr from 'plyr';

const videoPlayer = new Plyr('#video-player');
const userNameElement = document.querySelector('#user-name');
const userAvatarElement = document.querySelector('#user-avatar');

1. 사용자 이름과 아바타를 업데이트하는 함수를 작성합니다.

function updateUserDetails(name, avatarUrl) {
  userNameElement.innerText = name;
  userAvatarElement.src = avatarUrl;
}

1. Plyr의 ready 이벤트를 사용하여 비디오 플레이어가 준비되면 사용자 이름과 아바타를 업데이트합니다.

videoPlayer.on('ready', event => {
  const videoDetails = event.detail.plyr.getVideoData();
  const userName = videoDetails.userName;
  const userAvatarUrl = videoDetails.userAvatarUrl;

  updateUserDetails(userName, userAvatarUrl);
});

결론

Plyr을 사용하면 동영상 플레이어 UI에서 사용자 이름과 아바타를 쉽게 표시할 수 있습니다. 이 글에서는 Plyr을 설치하고 사용자 이름과 아바타를 표시하는 방법을 알아보았습니다. Plyr을 활용하여 동영상 플레이어의 UI를 개선하고 사용자 경험을 향상시킬 수 있습니다. 자세한 내용은 Plyr 공식 문서를 참조하십시오.