3

私は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()メソッドでトリガーされているのかわかりません。

どのようにするかについては、ドキュメントの例は表示されません。

+0

(https://github.com/kaorun343/vue-youtube-embed/blob/master/ example/app.js#L55)が示すように、他のものと同じでなければなりません。この問題を解決するにはこちら[https://github.com/kaorun343/vue-youtube-embed/issues/new]にしてください。 – Saurabh

+1

あなたの質問に答える方法はわかりませんが、 'body'要素は' doument.body'でアクセスできることを知っていますか?より少ないコード行を記述するのに役立ちます。 – jeerbl

+0

@jeerbl良いチップ。ありがとう。 – lukeliasi

答えて

関連する問題