我如何在 vue js 中使用 Plyr.io 触发播放、暂停和结束事件

Question

我正在 vue js 应用程序中使用 vimeo 播放视频，但我无法获得暂停事件和播放事件......下面我给出了我正在使用它的代码，但似乎我错过了一些东西或者我没有得到要添加的点。视频正在通过它正在播放的 API，但我想在视频暂停时触发暂停事件。<template>  <div style="max-height: 560px">    <h1 class="title is-size-3" style="text-align: center;">{{ videoTitle }}</h1>    <vue-plyr ref="plyr">      <div class="plyr__video-embed">        <iframe          v-bind:src="videoUrl"          allowfullscreen          allowtransparency          allow="autoplay"          height="100%"          width="100%"        ></iframe>      </div>    </vue-plyr>    <div class="vimeoPlayer"></div>  </div></template><script>import { GET_VIDEO } from "../utils/endpoint.js";const axios = require("axios");export default {  name: "Vimeo",  data() {    return {      videoUrl: "",      videoTitle: "",      videoVimeoId: ""    };  },  computed: {    player() {      return this.$refs.plyr.player;    }  },  methods: {    onVideoPause: function() {      console.log("Video is Paused");    }  },  mounted() {    this.video_id = this.$route.query.video_id;    axios      .get(api)      .then(response => {        this.videoUrl =          response.data.data.video_url +          "?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media";        this.videoTitle = response.data.data.title;        this.videoVimeoId = response.data.data.video_url.split("/")[4];      })      .catch(e => {        console.log(e);      });  }};</script>

Answer 1

Vimeo 已经创建了一个很好的 API 包装器，可以让您轻松地做到这一点。

使用安装npm install @vimeo/player --save然后将其导入到您选择的组件中

import Player from '@vimeo/player

由于您已经有一个 iframe 播放器，您需要做的就是向它添加一个 ref 并使用 DOM 元素实例化 Vimeo 播放器构造函数。然后，您可以向实例添加事件侦听器，并在触发事件时调用您喜欢的任何方法。

在您挂载的函数中添加以下内容：

mounted() {

  const player = new Player(this.$refs.iframe)

  player.on('play', (data) => this.onPlay(data))

  player.on('pause', (data) => this.onPause(data))

}

methods: {

  onPlay(data) {

    console.log("Video is playing", data)

  },

  onPause(data) {

    console.log("Video is paused", data)

  }

}

更多信息可以在https://github.com/vimeo/player.js找到

希望这可以帮助

编辑

刚刚意识到您特别要求使用 plyr.io 的说明。

将这些事件侦听器添加到挂载的钩子。

mounted() {

  this.player.on('pause', () => this.onVideoPause())

  this.player.on('play', () => this.onVideoPlay())

}

Answer 2

在< vue-plyr>中添加“ pause ”作为emit in：emit属性来暂停，如果玩家已经完成，也可以使用“ ended ”来获取动作，并将其分配为vue-plyr元素中的选项，

前任：

<vue-plyr :emit="['pause','ended']" @pause="ActionController" @ended="endedAction"> <div data-plyr-provider="youtube" data-plyr-embed-id="nM2Da70XfEs"></div> </vue-plyr>

然后，将 ActionController 定义为方法 {} 的函数，

完整示例

<script>

export default {

        methods: {

          ActionController: function(event) {

            console.log(event.detail.plyr.currentTime) // to get current time, DON'T FORGET REMOVE IT, just for check 😊

          },

          endedAction: function(event) {

            console.log('end')

          }

        }

}

</script>

<template>

<vue-plyr :emit="['pause','ended']" @pause="ActionController" @ended="endedAction">

              <div data-plyr-provider="youtube" data-plyr-embed-id="nM2Da70XfEs"></div>

  </vue-plyr>

</template>

参考 => https://github.com/sampotts/plyr#events