0

概述

我在我的网站上使用 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这似乎不符合我想要实现的目标，并且仍然存在同样的问题。

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

4

1 回答 1

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)
    },
}
于 2019-10-07T11:32:22.807 回答