Vue.js 기반 프로젝트에서 비디오 플레이어를 구현해야 하는 경우가 있습니다. video.js를 기반으로 한 서드파티 라이브러리를 활용하면 비교적 간단하게 통합할 수 있습니다.

사용 가능한 라이브러리

npm 레지스트리에서 vue-video-player 패키지를可以利用할 수 있습니다.

설치 방법

다음 명령어로 패키지를 설치합니다:

npm install vue-video-player --save

프로젝트 설정

메인 파일 구성

설치가 완료되면 애플리케이션의 진입점에서 플러그인을 등록해야 합니다.

// main.js
import VueVideoPlayer from 'vue-video-player'

Vue.use(VueVideoPlayer)

컴포넌트에서 사용

비디오 플레이어를 사용하려는 컴포넌트에서 다음과 같이 임포트하고 등록합니다:

import { videoPlayer } from 'vue-video-player'

export default {
  components: {
    Header,
    videoPlayer
  },
  // ... rest of component
}

플레이어 구현

템플릿에서 video-player 컴포넌트를 배치하고各种 이벤트를 처리할 수 있습니다:

<template>
  <video-player 
    ref="videoPlayer"
    :options="playbackConfig"
    @play="handlePlayEvent"
    @pause="handlePauseEvent"
    @ended="handleEndedEvent"
    @loadeddata="handleLoadedEvent"
    @waiting="handleWaitingEvent"
    @playing="handlePlayingEvent"
    @timeupdate="handleTimeUpdate"
    @canplay="handleCanPlay"
    @canplaythrough="handleCanPlayThrough"
    @statechanged="handleStateChange"
    @ready="initializePlayer">
  </video-player>
</template>

<script>
export default {
  data() {
    return {
      playbackConfig: {
        start: 0,
        playsinline: false,
        muted: true,
        language: 'ko',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: "video/mp4",
          src: "https://cdn.example.com/videos/sample.mp4"
        }],
        poster: "/static/images/thumbnail.jpg",
      }
    }
  },
  mounted() {
    console.log('플레이어 인스턴스 확인:', this.player)
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    }
  },
  methods: {
    handlePlayEvent(player) {
      // 재생 이벤트 처리
    },
    handlePauseEvent(player) {
      // 일시정지 이벤트 처리
    },
    handleEndedEvent(player) {
      // 재생 완료 이벤트 처리
    },
    handleLoadedEvent(player) {
      // 데이터 로드 완료
    },
    handleWaitingEvent(player) {
      // 버퍼링 대기 상태
    },
    handlePlayingEvent(player) {
      // 재생 중인 상태
    },
    handleTimeUpdate(player) {
      // 재생 위치 업데이트
    },
    handleCanPlay(player) {
      // 재생 가능한 상태
    },
    handleCanPlayThrough(player) {
      // 완전 재생 가능한 상태
    },
    handleStateChange(currentState) {
      // 상태 변경 처리
    },
    initializePlayer(player) {
      console.log('플레이어 준비 완료:', player)
      // 초기화 후 추가 설정 가능
    }
  }
}
</script>

주요 옵션 설명

playbackConfig 객체로 다양한 옵션을 설정할 수 있습니다:

• start: 초기 재생 위치(초 단위)
• playsinline: 인라인 재생 모드 활성화
• muted: 음소거 상태
• language: 인터페이스 언어 설정
• playbackRates: 재생 속도 선택지 배열
• sources: 비디오 소스 정보 배열
• poster: 썸네일 이미지 경로

이벤트 핸들링

다양한 이벤트를 통해 재생 상태를 모니터링하고 제어할 수 있습니다. computed 속성으로 player 인스턴스에 접근하여 프로그래밍方式进行 제어할 수 있습니다.