Попытка управления Plyr через API в Vue.js - PullRequest
Новая
       21

Попытка управления Plyr через API в Vue.js

0 голосов
/ 07 октября 2019

Обзор

Я использую Plyr в качестве оболочки для видео на своем веб-сайте, и я пытаюсь управлять видеоплеером через его API, когда функция вызывается при отладкеfunction.

По сути, когда я ввожу новый идентификатор видео для YouTube, я хочу, чтобы существующее видео было уничтожено, а затем на его место было добавлено другое видео, которое относится к новому идентификатору и затем воспроизводится автоматически.

В конечном итоге это будет преобразовано в другой компонент на моем веб-сайте.

Моя проблема

Кажется, я не могу управлять плеером через 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, и это, кажется, не вписывается в то, чего я пытаюсь достичь, и все еще имеет те же проблемы.

Как всегда, любая помощь будет очень признательна.

1 Ответ

1 голос
/ 07 октября 2019

Это потому, что вы потеряли исходную ссылку на экземпляр 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)
    },
}
...