Update prototype variable Javascript

Question

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 !

How are you calling the function .getCurrentFrame() You do not show any instances of Video in your code — Esailija
– Esailija, Commented Jul 4, 2012 at 11:07
One comment on your code: I would recommend you specfied the scopes of the variables your used in the functions. It is either private (by adding var, or adding this to make it accessible within the prototype). Otherwise you would create a lot of "garbage" in the global scope. This comment is unrelated to your question, though. — Grace Huang
– Grace Huang, Commented Jul 5, 2012 at 21:13

Linus Kleen · Accepted Answer · 2012-07-04 12:34:38Z

2

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.

edited Jul 4, 2012 at 12:34

answered Jul 4, 2012 at 11:08

Linus Kleen

34.8k10 gold badges97 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fabax Over a year ago

thanks, I already use an instance to use the function getCurrentFrame(). perhaps i should have been more precise about this. but my issue is that the this.frame does not change outside of the method setUpPlayer. so when I instanciate my video object and call it getCurrentFrame. the method return the value that has been put in the constructor in the first place (in my case nothing). When i want it to return the value updated

Collectives™ on Stack Overflow

Update prototype variable Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related