Question

我正在使用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>

ends（）方法没有触发，我不确定原因。

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

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

Answer 1

作者给我写了一个例子，我在这之后得到了它： https://github.com/kaorun343/vue-youtube-embed/blob/master/play/Events.vue

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

1 个答案: