소개

Vue.js에서 YouTube를 내장했으므로 그 방법을 간략하게 요약합니다. (엄청 쉽게 할 수 있습니다!)

vue-youtube라는 뛰어난 것이 존재하고 개발 초보자 나도 쉽게 구현할 수있었습니다! !
참고 링크

YouTube의 내장 전용 기사이므로 다른 부분은 기재되어 있지 않습니다. 양해 바랍니다.

1.vue-youtube 설치

먼저 vue-youtube를 설치합니다.

npm install vue-youtube

2. YouTube 포함

이미 마지막 단계입니다! !
그리고는 youtube 태그를 넣는 것만! 정말 쉽지 않니? ?
<template> 안에는 이쪽을.

<youtube :video-id="videoId" />

<script> 안에는 이쪽을.
videoId에 YouTubeID를 입력하세요. URL의 v = 이후 11 개입니다!

export default {
  data() {
    return {
      videoId: 'fHuO3Xaje98'
    }
  }
}

최종 전체 코드

아무 장식도 없는 제일 질소인 상태입니다만 완성입니다! !

App.vue

<template>
  <div>
    <youtube :video-id="videoId" />
  </div>
</template>

<script>
import Vue from 'vue'
import VueYoutube from 'vue-youtube'

Vue.use(VueYoutube)

export default {
  data() {
    return {
      videoId: 'fHuO3Xaje98'
    }
  }
}
</script>

덤

youtube 태그 내에 한 번 더 추가하면 플레이어의 상태를 트리거로 이벤트를 발화할 수있는 것 같습니다.

공식에 따르면 ...

이벤트
The component triggers events to notify the parent component of changes in the player. For more information, see YouTube IFrame Player API.


무려 이렇게 있어요! !

모처럼이므로 재생했을 때 console.log에 "재생 중입니다"라고 내 보자 ~
youtubeタグ 안에는 playing을, <script> 안에는 methods를 추가합니다.

App.vue

<template>
  <div>
    <youtube :video-id="videoId" @playing="playing" />
  </div>
</template>

<script>
import Vue from 'vue'
import VueYoutube from 'vue-youtube'

Vue.use(VueYoutube)

export default {
  data() {
    return {
      videoId: 'fHuO3Xaje98'
    }
  },
  methods: {
    playing() {
      console.log('再生中です')
    }
  }
}
</script>

동영상을 재생할 때...


했어! 대성공입니다! !