私はvuejsコンポーネントでYoutube APIを使用するためにvue-youtube-embedを使用しています。Vue.js 2 - 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がended()メソッドでトリガーされているのかわかりません。
どのようにするかについては、ドキュメントの例は表示されません。
(https://github.com/kaorun343/vue-youtube-embed/blob/master/ example/app.js#L55)が示すように、他のものと同じでなければなりません。この問題を解決するにはこちら[https://github.com/kaorun343/vue-youtube-embed/issues/new]にしてください。 – Saurabh
あなたの質問に答える方法はわかりませんが、 'body'要素は' doument.body'でアクセスできることを知っていますか?より少ないコード行を記述するのに役立ちます。 – jeerbl
@jeerbl良いチップ。ありがとう。 – lukeliasi