CODEWITHSUNDEEP
javascriptoopprototype
Fabax
Fabax

Reputation: 1

Update prototype variable Javascript

I'm working on a project where i need to return a framecount from a playing video via the method video.prototype.getCurrentFrame(). my script works pretty much fine exept that the number that is returned by this method is 'undefined'. I know that my problem has to do something with the scope of my variables but I'm new in javascript and I can't seem to make it work on my own ...

In my method video.prototype.setUpPlayer I have a function that allows me counting the framcount 'timeListener' where I update a variable called frame; If I try to access this frame variable throught video.prototype.getCurrentFrame() it doesnt reach the updated value.

here is my code so far : 

var Video = function(aVideoId){
this.videoId = aVideoId;
this.frame;
this.videoContainer; 
this.myPlayer;
this.timeListener;
this.progressListener;
};

Video.prototype.getCurrentFrame = function(){
    return this.frame;
}

Video.prototype.setVideoContainer = function(){
        videoContainer = $('<div>', {
        id: this.videoId,
        class: 'projekktor',
        width: "100%",
        height: "100%",
    });
    $('#innerContainer').html(videoContainer);
}

Video.prototype.setUpPlayer = function(){
    videoId = this.videoId;


    myPlayer = projekktor('#' + videoId, {
        controls: "true",
        volume: 0.5,
        preload: false,
        autoplay: true,
        playlist: [{
            0: {
                src: '/' + videoId + '.mp4',
                type: 'video/mp4'
            },
            1: {
                src: '/' + videoId + '.mov',
                type: 'video/mov'
            },
            2: {
                src: '/' + videoId + '.ogv',
                type: 'video/ogv'
            }
        }]
    }, function() { // call back
        myPlayer.addListener('time', timeListener);
        myPlayer.addListener('progress', progressListener);
    });

    timeListener = function(duration) {
            $('#currentTime').html(duration);
            frame = Math.round(duration * 25);
            $('#currentFrame').html(frame); 
                            return this.frame = frame;


        }

    progressListener = function(value) {
            $('#progress').html(Math.round(value))
            $('#progress2').html(myPlayer.getLoadProgress());
        }   
}

Thanks in advance for your help !

Upvotes: 0

Views: 275

Answers (1)

Linus Kleen
Linus Kleen

Reputation: 34612

You need to call getCurrentFrame from an instance of Video, not the prototype itself:

var video = new Video;
alert(video.getCurrentFrame());

The only way you could retrieve the current frame using the prototype would be to use apply() (which also requires an instance):

var video = new Video;
alert(Video.prototype.getCurrentFrame.apply(video));

EDIT: It appears that the timeListener callback is not executed in the context of the video's instance. You might have to explicitly bind the callback to the correct scope:

timeListener = function() 
    {
    //  ...
        this.frame = frame;
    //  ...
    }

var video = new Video;

// binding the correct context
myPlayer.addListener('time', timeListener.bind(video));

this in the timeListener closure is now video.

Upvotes: 2

Related Questions