Introduction
I have integrated Plyr as a video wrapper on my website for controlling the video player through its API when triggered by a debounce function.
Essentially, when a new YouTube video ID is provided, I aim to replace the existing video with the new one and autoplay it accordingly. This functionality will later be incorporated into another component on the website.
The Challenge
I am encountering difficulty in manipulating the player via the API, resulting in an inability to utilize Plyr functions or make any modifications to its behavior after Vue.js completes its tasks.
In the updateVideo function, I attempt to play the video using player.play(), but this action triggers the following console error:
Cannot read property 'play' of undefinedI have consulted the documentation in an effort to resolve this issue, yet I remain stuck at this point.
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>I am facing challenges in controlling the video player as per the API specifications.
Moreover, I explored vue-plyr but found that it does not align with my requirements and presents similar issues.
Your assistance would be greatly appreciated as always.