2 回答

TA貢獻1824條經(jīng)驗 獲得超6個贊
Vimeo 已經(jīng)創(chuàng)建了一個很好的 API 包裝器,可以讓您輕松地做到這一點。
使用安裝npm install @vimeo/player --save然后將其導入到您選擇的組件中
import Player from '@vimeo/player
由于您已經(jīng)有一個 iframe 播放器,您需要做的就是向它添加一個 ref 并使用 DOM 元素實例化 Vimeo 播放器構造函數(shù)。然后,您可以向?qū)嵗砑邮录陕犉?,并在觸發(fā)事件時調(diào)用您喜歡的任何方法。
在您掛載的函數(shù)中添加以下內(nèi)容:
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())
}

TA貢獻1891條經(jīng)驗 獲得超3個贊
在< vue-plyr>中添加“ pause ”作為emit in:emit屬性來暫停,如果玩家已經(jīng)完成,也可以使用“ 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 定義為方法 {} 的函數(shù),
完整示例
<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
添加回答
舉報