I am currently attempting to load content dynamically based on the duration of a video being displayed. However, I am encountering issues when trying to access the duration property. Could this problem be related to the timing of plyr's appearance within the DOM?
Imagine I have a vue template with the following line:
<div ref="dur"> duration: {{ functionOfDuration }} </div>
<plyr>
<video id="vidplayer" v-on:timeupdate="updatePosition">
<source src="videos.mp4" type="video/mp4">
</video>
</plyr>
Then in the vue component, I include:
<script>
export default {
data() {
},
computed: {
functionOfDuration: setInterval(function () {
const player = new Plyr('#vidplayer');
if(player.readyState > 0) {
return player.duration;
}
}, 200),
},
};
<script>
The purpose of the setInterval is to periodically check and update the functionOfDuration property once player.readyState becomes true.
However, an error message appears stating:
[Vue warn]: Getter is missing for computed property "functionOfDuration".Please note that a code snippet accessing the duration at a later time would look like this:
methods: {
updatePosition(t) {
const player = new Plyr('#vidplayer');
this.$refs.dur.innerHTML = player.duration;
},
},