IT이야기

Vue.js 2 - vue-youtube가 포함된 비디오 종료 상태 탐지 방법?

cyworld 2022. 4. 25. 21:54
반응형

Vue.js 2 - vue-youtube가 포함된 비디오 종료 상태 탐지 방법?

나는 vuejs 컴포넌트에 있는 유튜브 API를 사용하기 위해 vue-youtube-embed를 사용하고 있다.

내 암호는 다음과 같다.

<script>
export default {
  data() {
    return {
      videoId: 'HjxYvcdpVnU',
      videoLaunched: false,
      videoLoaded: false,
      videoRewatch: false,
      videoEnded: false
    }
  },
  computed: {
    videoThumb: function () {
      return 'https://img.youtube.com/vi/' + this.videoId + '/maxresdefault.jpg';
    }
  },
  methods: {
    launchVideo() {
      this.videoLaunched = true;
      this.player.playVideo();
      document.getElementsByTagName('body')[0].classList.add('overlay');
    },
    ready(player) {
      fitvids();
      this.player = player;
      this.videoLoaded = true;
    },
    ended() {
      console.log('Ended');
    }
  } 
}
</script>

및 html:

<youtube :video-id="videoId" @ready="ready" @ended="ended" player-width="100%" 
  player-height="57" :player-vars="{ autoplay: 0, controls: 1, modestbranding: 1, showinfo: 0, rel: 0 }">
</youtube>

종료된() 방법이 트리거되지 않고 그 이유를 잘 모르겠다.

ready() 메서드가 잘 작동하는데 console.log가 종료() 메서드에서 트리거되지 않는 이유를 모르겠다.

나는 그것을 어떻게 하는지에 대한 문서들에서 예를 볼 수 없다.

저자는 나에게 예를 하나 썼고, 나는 이것을 따라 그것을 작동시켰다: https://github.com/kaorun343/vue-youtube-embed/blob/master/play/Events.vue

참조URL: https://stackoverflow.com/questions/41651286/vue-js-2-vue-youtube-embed-how-to-detect-video-ended-state

반응형