Run JavaScript when a video has ended using addEventListener('ended')

Hello! I have videos that are shown when you click on a thumbnail. When the video has ended, I want to run a function that continues some timelines etc. I have added a class name for each video which is svtvideo and tried to run a javascript that I created but it doesn’t work.

Here is the code:

var video = $('.svtvideo');
var removeVideos = (function () {
hypeDocument.continueTimelineNamed('videoplacement');
hypeDocument.continueTimelineNamed('closevideobtngardinTL');
hypeDocument.goToTimeInTimelineNamed(0, 'rotationvsstillTL');

});

video.addEventListener('ended', removeVideos, false);

Any idea on how to do this?

if you import a video into hype, it shows the length and frames of the video in the timelineinspector.
you have to add one timeline per video. then in the timeline-actions you can set a keyframe and do whatever you´d like to do during the video. in your case at the end of the video (jump to next scene)

So there is no way to run javascript if the video has ended without using a timeline? Sounds really strange to me but thanks for the advice strmiska!

you also can create a keyframe at the end and call your javascript.

you’re ‘video’-variable is a collection/array. so you’ve got to iterate thru and attach the event to each element …

Thanks @h_classen!

Solved it with this code on each video:

var video = hypeDocument.getElementById('svtvideoA');
var gototimes = (function () {
hypeDocument.continueTimelineNamed('videoplacement');
hypeDocument.continueTimelineNamed('closevideobtngardinTL');
hypeDocument.goToTimeInTimelineNamed(0, 'rotationvsstillTL');
});
video.addEventListener('ended', gototimes, false);
1 Like

For others looking to perform an action (like jump to another scene) when a video has ended, here's a quick code snippet you can use:

  1. Set a unique element ID for your video in the Identity inspector: myVideo
  2. Next, run the following code 'on scene load' for the scene containing the video. When the video reaches its final moment on that scene, the scene MySceneName will be transitioned to:

 

hypeDocument.getElementById('id').addEventListener('ended',myHandler,false);
function myHandler(e) {
    if(!e) { e = window.event; }
    // What you want to do after the event
   hypeDocument.showSceneNamed('MySceneName', hypeDocument.kSceneTransitionCrossfade, 1.1)
}
9 Likes

Hi there,
Is there a way to have the video in hype show on the timeline for the duration of the video, so the adding animations on top of the video will be more intuitive. I know this is the case in edge animate and was wondering if this is also possible in hype.
Thanks,
Bas

Hi Daniel (or anyone else)
I’ve tried your javascript code (to transition to another scene once my video has finished playing) but can’t get this to work - (with an embedded YouTube clip not set to autoplay, tested in Safari). Can you or someone spell out what I’m missing please, (I’m not a developer obviously?)

Have followed the above, ‘id’ is replaced by unique ID I’ve given my video element, and ‘myScenename’ is the name of the scene to transition to when the video is finished playing.

What I don’t quite get, is that the first line of code created in each new javascript function by Hype by default can’t be deleted or modified ie 'function untitledFunction(hypeDocument, element, event)}, am guessing that even though it’s not commented out, that line is just ignored and won’t interfere with the next line of code?

Would love to reliably play a youtube or vimeo clip, and when video finished, jump to another scene (and not use a timeline for this). Thanks so much - Sharon

Like the example you outlined, I want to perform an action when an audio clip is done. If I start the audio with a ‘play sound…’ behavior, how do I set/determine the ‘id’?

(Second very newbie js question: when I add a new js function in Hype, do I change the of ‘untitledFunction’ to, replacing the ID with Q1 answer.

function listenForEnd(hypeDocument, element, event) {
hypeDocument.getElementById('id').addEventListener('ended',myHandler,false);
function myHandler(e) {
   if(!e) { e = window.event; }
   // What you want to do after the event
  hypeDocument.showSceneNamed('MySceneName', hypeDocument.kSceneTransitionCrossfade, 1.1)
  }
}

This won't work with the built in/"play sound" method for audio, as this doesn't necessarily have an element backing it (it can use the Web Audio API). Instead to use the ended event handler you'll need to manually create an HTML5 <audio> tag with an ID in the Inner HTML of an element like a Rectangle.

Make sense. Cool. Thanks!!