[javascript] Plyr과 Vue.js의 통합 방법

27 Nov 2023

javascript

Plyr은 HTML5 비디오 플레이어 라이브러리로, 동적인 비디오 재생 기능을 제공합니다. Vue.js는 JavaScript 프레임워크로, 웹 애플리케이션 개발을 위한 기능과 도구를 제공합니다. Plyr과 Vue.js를 함께 사용하여 비디오 플레이어를 구현하는 방법에 대해 알아보겠습니다.

Plyr 설치

먼저 Plyr을 설치해야 합니다. npm을 사용하여 Plyr을 설치할 수 있습니다. 터미널에서 다음 명령어를 실행하세요.

npm install plyr

Vue.js와 함께 Plyr 사용하기

Vue.js와 Plyr을 통합하려면 Plyr 구성 요소를 Vue.js에 등록해야 합니다. 구성 요소를 등록하고 Plyr을 Vue 인스턴스와 연결하는 방법은 다음과 같습니다.

// main.js 파일

import Plyr from 'plyr';
import 'plyr/dist/plyr.css';

Vue.prototype.$plyr = Plyr;

new Vue({
  render: h => h(App),
}).$mount('#app');

위 코드에서 Plyr 라이브러리를 import하고, Plyr의 CSS를 불러옵니다. 그리고 Vue 프로토타입에 $plyr 속성으로 Plyr을 추가합니다. 이렇게 하면 Vue 인스턴스 어디에서나 $plyr 객체에 접근할 수 있습니다.

Plyr 컴포넌트 사용하기

이제 Plyr을 Vue 컴포넌트에서 사용할 준비가 되었습니다. Plyr을 사용하는 Vue 컴포넌트를 작성하는 방법은 다음과 같습니다.

// VideoPlayer.vue 파일

<template>
  <div>
    <video ref="plyrVideo" class="plyr__video-embed" controls>
      <source :src="videoUrl" type="video/mp4">
    </video>
  </div>
</template>

<script>
export default {
  name: 'VideoPlayer',
  props: ['videoUrl'],
  mounted() {
    this.setupPlyr();
  },
  methods: {
    setupPlyr() {
      const player = new this.$plyr(this.$refs.plyrVideo);
      player.play();
    }
  }
};
</script>

<style scoped>
@import 'plyr/dist/plyr.css';
</style>

위 코드에서는 Plyr을 사용하는 Vue 컴포넌트인 VideoPlayer를 작성합니다. props로 videoUrl을 받아와 해당 비디오를 재생합니다. mounted 훅에서 setupPlyr 메서드를 호출하여 Plyr을 설정하고 재생합니다.

이제 Plyr과 Vue.js를 통합한 비디오 플레이어를 사용할 수 있습니다. 이를 원하는 컴포넌트에서 사용하려면 비디오 URL을 전달하면 됩니다.

결론

Plyr과 Vue.js를 함께 사용하여 동적인 비디오 재생 기능을 가진 웹 애플리케이션을 구현할 수 있습니다. Plyr을 Vue.js에 등록하고 Plyr 컴포넌트를 작성하여 비디오를 재생할 수 있습니다. Plyr과 Vue.js의 통합은 강력한 비디오 플레이어 기능을 제공하면서도 Vue.js의 장점을 최대한 활용할 수 있도록 합니다.

Plyr 설치

Vue.js와 함께 Plyr 사용하기

Plyr 컴포넌트 사용하기

결론

참고 자료