如何在vue js中使用Plyr.io触发播放、暂停和结束时的事件
如何在vue js中使用Plyr.io触发播放、暂停和结束时的事件
提问于 2019-10-12 19:27:52
我在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>回答 2
Stack Overflow用户
发布于 2019-10-12 20:37:49
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())
}Stack Overflow用户
发布于 2020-07-15 21:27:56
在< vue-plyr >中添加“”作为emit in :emit属性以暂停，如果玩家已经完成操作，也可以使用“ And ”，并将其指定为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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58357724
复制相关文章
相似问题
腾讯云开发者
