尝试通过 Vue.js 中的 API 控制 Plyr

Question

概述

我正在使用 Plyr 作为我网站上视频的包装器，当去抖动函数调用函数时，我正在尝试通过它的 API 控制视频播放器。

基本上，当我为 YouTube 输入新的视频 ID 时，我希望销毁现有视频，然后在它的位置输入另一个相对于新 ID 的视频，然后自动播放。

这最终将改编成我网站上的另一个组件。

我的问题

我似乎无法通过 API 控制播放器，这意味着一旦 Vue 完成它的一部分，我就无法破坏或使用任何 Plyr 函数来改变它的运行方式。

从下面的代码中可以看出，在updateVideo函数中，我尝试使用player.play()播放视频，然后抛出此控制台错误：

Cannot read property 'play' of undefined

我已经查看了文档以尝试解决此问题，但我陷入了死胡同。

YouTube.vue

<script>
import Plyr from 'plyr'
import axios from 'axios'
import Swal from 'sweetalert2'
import _ from 'lodash'
const Toast = Swal.mixin({
toast: true,
position: 'center',
showConfirmButton: false,
timer: 3000
})
export default {
data() {
return {
// bTqVqk7FSmY
movieName: 'JL3b_fewO08',
}
},
mounted() {
const player = new Plyr('.yt-player');
},
methods: {
updateVideo: function() {
const player = new Plyr('.yt-player');
player.play(); // This throws an error
player.volume = 0.5;
},
debounceVideo: _.debounce(function() {
this.updateVideo();
}, 700)
},
}
</script>
<template>
<div class="my-10 mx-auto pl-10">
<form class="mb-3">
<input type="text" v-model="movieName" @input="debounceVideo" class="border-2 p-2 w-full" placeholder="Please specify a movie name" data-city-name>
</form>
<div class="w-full">
<div class="yt-player" data-plyr-provider="youtube" v-bind:data-plyr-embed-id="movieName"></div>
</div>
</div>
</template>

我的主要问题是尝试像 API 指定的那样控制视频，但不起作用。

我也研究了vue-plyr，这似乎不符合我想要实现的目标，并且仍然存在相同的问题。

与往常一样，任何帮助将不胜感激。

Answer 1

这是因为您丢失了对 Plyr 实例的原始引用：相反，我建议在实例化新的 Plyr 实例时，将其存储在类成员中，如下所示：this.player = new Plyr('.yt-player');.

这是您更新的代码：您只需要：

1. 为您的data添加新密钥，
2. 通过this.player = new Plyr(...)分配新创建的实例，以及
3. 使用this.player引用播放器实例：

---

export default {
data() {
return {
movieName: 'JL3b_fewO08',
// Create a key in which we will store the new Plyr instance
player: null,
}
},
mounted() {
// Store in data
this.player = new Plyr('.yt-player');
},
methods: {
updateVideo: function() {
// this.player will have the reference to your Plyr instance
this.player.play();
this.player.volume = 0.5;
},
debounceVideo: _.debounce(function() {
this.updateVideo();
}, 700)
},
}