Javascript puzzle

mlapl1
mlapl1 Community Member Posts: 349
Hello

I believe that I got the following piece of code from one of the contributors here (not absolutely sure if I have not corrupted it though). The idea is to play a video from point A (starting_point) to point B (ending_point). These values are obtained from a form in Lectora. They are transmitted correctly to the script. Here is my problem.

I enter the numbers in the form the first time and the clip is played correctly from point A to point B. I now change the values in the entry fields. point A is set correctly and the clip starts playing there. However, point B stops at the value set in the first entry OR a value LOWER than that. I cannot get it to stop at a value greater than the initial value of ending_point.

Example. I set the clip to play from point A (5 seconds) to point B (10 seconds). This works correctly.

Now, I want to play the clip from point A (8 seconds) to 12 seconds: it plays from 8 seconds to 10 seconds NOT 12 seconds.

I set it to play from 6 seconds to 9 seconds it plays that correctly.

If, now I want to play from 6 seconds to 10 seconds, it stops at 9 seconds.

In other words, it seems to stop at the lowest value given for ending_point.

Clearly there is a problem with the code around the spot marked PROBLEM??? below maybe a little earlier.

I am a javascript scavenger and have not been able to get around this no matter what I do.

Suggestions very welcome. Thank you - Andrew

var starting_point = Varstart_point.getValue(); // Get starting_point from an entry field
var ending_point = Varend_point.getValue(); // Get starting_point from an entry field
var myplayer = document.getElementById('video2535Media');

myplayer.player.setCurrentTime(starting_point); // Set starting time HERE
myplayer.play();

myplayer.addEventListener('timeupdate', function(e) {
var currentTime = myplayer.currentTime;
console.log(currentTime);

if(currentTime >= ending_point){ // Set ENDING time HERE ##### PROBLEM ???
myplayer.stop();
}

}, false);

 

Comments

  • mlapl1
    mlapl1 Community Member Posts: 349
    Hello again

    In the last few minutes after sending my initial message, I decided in desperation to do something which made little sense to me. Instead of this:

    var starting_point = Varstart_point.getValue(); // Get starting_point from an entry field
    var ending_point = Varend_point.getValue(); // Get starting_point from an entry field

    I did this...

    starting_point = Varstart_point.getValue(); // Get starting_point from an entry field
    ending_point = Varend_point.getValue(); // Get starting_point from an entry field

    And let the variables declare themselves somehow and now everything seems to work. What I did seems illogical to me as the variables need to be declared properly. As I said... I am a JS scavenger... Any clues on how this could be?

    Thank you

    Andrew
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    I cannot pinpoint it 100% without testing it fully, but it seems as your first approach initializes the value, and thus fails. I often set somewhere in the top of the script/page a variable.

    var ending_point;

    Without filling it with anything. thus making it globally accessible in all my functions and scripts.
    Then when needed i fill it.
    ending_point = 200;
    or overwrite whatever value is in it.
    For me that works fine...
    As said without a proper sample to test, cannot tell if scope is the issue.

    Regards,

    Math

     
  • sirwise23
    sirwise23 Community Member Posts: 442 ☆ Roadie ☆
    Not sure if this is relevant for this issue but it could be because of the way the video is encoded.  Videos have a Key Frame Distance in the encoding.  I know when I dealt with it in the past, sometimes you can only jump to a point in a video that has a key frame.  For example Adobe tends to set that at a default of 72 frames, which if a video is 30fps, would be every 2-3 seconds.  This could be causing an issue with the start or stop point.  It may only start or stop at a key frame.
  • mlapl1
    mlapl1 Community Member Posts: 349
    Thank you Math and Lazaro for your comments. As everything now works correctly when I remove the declaration identified above, it seems to point more to the kind of problem mentioned by Math than the one identified by Lazaro. I am still struggling with trying to understand scoping of JS. I think I have a reasonable handle on scoping of actions etc, but it is not yet clear, to me at least, about how JS is treated by Lectora.

    Thank you both once again for helping.

    Andrew
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Scope can indeed be tricky and cause issues. If you specifically define a variable in a function, it will not be available outside that function if not passed out somehow. So thats why i declare variables in the top of my scripts...mostly the first thing in it... then when my page is loaded i set whatever variable i need. Somewhat like this...

    var myVar1;
    var myVar2;

    $(document).ready(function(){ //JQuery needed for this
    myVar1 = 1;
    myVar2 = "two";
    });

    function scopeTest1(){
    var myVar3 = 3;
    console.log("do i have access to myVars: "+myVar1+" / "+myVar3);// yes i do
    }

    function scopeTest2(){
    console.log("do i have access to myVars: "+myVar1+" / "+myVar3);// myVar3 will return undefined
    }

     

    Regards,

    Math
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    To explain scope a bit better.
    When defining a variable without var, you're directly accessing the global object. That means, your Javascript engine trys to lookup your variable on the global object (window if you're in a browser). Since that property does not exist yet, your JS engine will throw. That probably happens in your first sample .

    Accessing an identifier without var will cause the browser to lookup the scopechain. Since the variable object for the global object is the global object itself, the lookup procedure will end up nowhere ( = exception ).By putting the var keyword infront, your js engine knows at parsetime that it has to declare a new variable with that identifier name. It actually does declare that variable with an undefined value (that is called "hoisting"). That means, using var will prematurely create a property in the current context with that name. So if that code is not located in any function or eval context, it'll create the property on the window object.

    Hope this helps..

    Math
  • mlapl1
    mlapl1 Community Member Posts: 349
    Thank you so much Math. It does help. I will experiment a bit.

    cheers

    Andrew