CODEWITHSUNDEEP
javascriptvue.jsvuejs2
ezero
ezero

Reputation: 1310

Vue - Reactive media .readyState

Using Vue.js, I would like to use the readyState property of an audio dom element as a reactive property.

I have the audio element in a component and accessing it with this.$refs.audioPlayer

I have tried setting a computed property to return the property:

audioLoaded(){
    if(this.$refs.audioPlayer){
        return this.$refs.audioPlayer.readyState;
    }
    return false;
}

This just returns the initial state (0), when the media is loaded, this should change to 4.

Is there any way to make this a reactive property?

Upvotes: 1

Views: 631

Answers (1)

ezero
ezero

Reputation: 1310

I got around the need for this by adding the a property called audioLoaded which is set to false when the component is created.

This function in mounted sets it to true when the audio is ready:

var self = this;
this.audioPlayer.oncanplay = function(){
    self.audioLoaded = true;
};

Upvotes: 1

Related Questions