Restarting Video from Specific Time After Returning to Scene


(Matt) #1

Hi -
I’m having quite a bit of difficult solving this problem:

I have a video (ID ‘video2’ in the scene called “2” in my file") that triggers the transition to another scene (3). I then want to leave scene 3 and return to scene 2 and have the video start playing from a specific time on a the timeline called “skip”. At the beginning of the “skip” timeline I’m calling:

//get the id of the video
var mediaElement = document.getElementById("video2");  
 
// go to 3 seconds:  
mediaElement.currentTime = 94;

mediaElement.play(); 

For some reason the video is beginning at the start. I suspect that it may have something to do with the Javascript I’m calling “OnSceneLoad” which is to start playing the same video in the first place.

I’m really stuck on this and would appreciate any insights.

My file is quite large and I cannot upload it.

thank you!
Matt


#2

Is this in the scene where the video exists? Make sure that you are running the currentTime function after the ‘on scene load’ function. You might get some use out of adding console logs so you can see what triggers when.

You can add something like

// go to 3 seconds:  
mediaElement.currentTime = 94;
console.log('set current time to 94');

… to get some transparency into what is triggering when.

Alternatively, if you can share your Hype document (or a minimized version with a small video) we can take a look.


(Matt) #3

Thanks @Daniel
I’ve attached the file here. I’ve replaced the video with a much smaller one.

Thank you!
MattBSM2017 copy.hype.zip (2.0 MB)


(Matt) #4

also…

Is this the correct way to jump to a timeline in a different scene?

hypeDocument.showSceneNamed('2', hypeDocument.kSceneTransitionCrossfade, 1.1);
       
        
  hypeDocument.startTimelineNamed('skip', hypeDocument.kDirectionForward);

#5

I’m not seeing the video start on scene one, and I’m very confused about what’s going on with the interactNF2 JavaScript function: https://gist.github.com/themorgantown/6d06915b01c701c4b71a7c9bd02f8259

This would work if you were not using the crossfade transition. During crossfade (or other transitions with durations), the active scene is the current scene for 1.1 seconds until the scene has finished its transition (In Hype’s API-mind). Using startTimelineNamed for a transition without a duration would work as expected.

I recommend creating a setTimeout to delay that second timeline trigger to occur 100 milliseconds after your scene transition start to be safe that you are on the right scene when triggering:

hypeDocument.showSceneNamed('2', hypeDocument.kSceneTransitionCrossfade, 1.1);
       
function WaitALittleBit() {      
hypeDocument.startTimelineNamed('skip', hypeDocument.kDirectionForward);
}

window.setTimeout(function() {
    WaitALittleBit();
}, 1200;

Here’s a simplified demo that shows how I would do this:

demo.zip (1.6 MB)

Using ‘video2’ as the Unique element ID is ok since you stick with that, but I would use new var name when you access the video element in a different scene. Also, make sure you use the hypeDocument.getElementById function to identify objects:

var purplevideo2 = hypeDocument.getElementById('video2');

And wrap it in such a way (using the timeout) that you are pointing to the element when that scene has been fully transitioned to.

Here’s how I would accomplish your goals of

  1. Jump back to a scene that has a video with a ‘scene load’ play(); action

  2. Go to a time in that video and play it

     hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionInstant);
     
     function WaitALittleBit() {      
     // example: 
     // hypeDocument.startTimelineNamed('skip', hypeDocument.kDirectionForward);
     
     // Using a new variable name for the video to avoid any conflicts: 
     
     var purplevideo2 = hypeDocument.getElementById('video2');
     
     // show current playtime when after 1 second of waiting 
     // in console output:
     console.log(purplevideo2.currentTime);
     
     // Pause the video. 
     purplevideo2.pause();
     
     // Jump to 5 seconds and play. 
     purplevideo2.currentTime = 5;
     purplevideo2.play();
     
     // Show the current state of video in console (should be 5!) 
     console.log(purplevideo2.currentTime);
      
     }
    
    
     // run the WaitALittleBit function after 1 second (above)
     window.setTimeout(function() {
         WaitALittleBit();
     }, 1000)
    

That first transition could be a crossfade, but make sure your ‘timeout’ is a longer duration than the crossfade :slight_smile:


(Matt) #6

Thanks @Daniel. This is super helpful. I understand your changes I’ve implemented them.

It’s still not functioning as I’d like because I think the javascript I have for “OnSceneLoad” is causing a problem when scene 2 is reloaded. (you can ignore scene 1).

When I run your code the video goes to 5 seconds, plays for a second and then pauses. The interactNF2 javascript that runs OnSceneLoad has all kinds of crazy timing functions with the video. Do think this is the problem and should I try some other way to accomplish returning to the video?

Thank you!
Matt