如何在 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><的 属性中添加="<strong">pause" 作为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>

然后，将动作控制器定义为方法 {} 的函数，

完整示例

<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