试图通过 API 在 Vue.js 中控制 Plyr

Question

概览

我在我的网站上使用 Plyr 作为视频的包装器，并且当一个函数被去抖动函数调用时，我试图通过它 API 来控制视频播放器。

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

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

我的问题

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

正如您从下面的代码中看到的，在 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 实例时，将其存储在 class 成员中：this.player = new Plyr('.yt-player');。

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

为您的 data、
通过this.player = new Plyr(...)和
引用播放器实例使用 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)
    },
}

试图通过 API 在 Vue.js 中控制 Plyr

Trying to control Plyr via API in Vue.js

javascript

vue.js

vue-component

plyr

plyr.js