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

Question

概述

我使用 Plyr 作为网站上视频的包装器，并且当防抖函数调用函数时，我尝试通过其 API 控制视频播放器。

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

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

我的问题

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

正如您从下面的代码中看到的，在 updateVideo 函数中，我尝试使用 player.play() 播放视频，然后它会向我抛出此控制台错误:

无法读取未定义的属性“play”

我查看了文档，试图了解如何解决这个问题，但我陷入了死胡同。

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. 向您的数据添加新 key ，
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)
    },
}