Vue.js 2 - vue-youtube-embed 如何检测视频结束状态？答案

【问题标题】：Vue.js 2 - vue-youtube-embed how to detect video ended state?Vue.js 2 - vue-youtube-embed 如何检测视频结束状态？
【发布时间】：2017-01-14 14:53:37
【问题描述】：

我正在使用 vue-youtube-embed 在我的 vuejs 组件中使用 Youtube API。

这是我的代码：

<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>

end() 方法没有触发，我不知道为什么。

ready() 方法工作正常，所以我不确定为什么在 end() 方法上没有触发 console.log。

我看不到文档中有关如何操作的示例。

【问题讨论】：

正如example 所示，它应该和其他人一样。提出问题here 这还没有解决。
我不知道如何回答你的问题，但你知道body 元素可以通过doument.body 访问吗？可能会帮助您编写更少的代码。
@jeerbl 好提示。谢谢。

标签： javascript youtube-api vue.js youtube-javascript-api vuejs2

【解决方案1】：

作者给我写了一个例子，我已经按照以下方式工作了： https://github.com/kaorun343/vue-youtube-embed/blob/master/play/Events.vue

【讨论】：

这里的一些细节也很好。