반응형
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
반응형
'IT이야기' 카테고리의 다른 글
바인딩 실패:이미 사용 중인 주소 (0) | 2022.04.25 |
---|---|
동일한 페이지에서 여러 Vue 구성 요소의 성능 향상 (0) | 2022.04.25 |
서버측 페이지 지정을 사용하여 Quasar q-table을 구현하는 방법 (0) | 2022.04.25 |
Vue JS에서 v-for를 사용하여 구성 요소에 대한 소품 설정 (0) | 2022.04.25 |
Ubuntu 아래에 JDK 11을 설치하는 방법? (0) | 2022.04.25 |