Run javascript when video has ended


(Markus Bjerre) #1

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?


Let videos execute actions upon end or when set frame is reached
(strmiska) #2

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)


(Markus Bjerre) #3

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!


(strmiska) #4

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


(Hans-Gerd Claßen) #5

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


(Markus Bjerre) #6

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);

How do you stitch scenes together in an animated video?
#7

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 MySceneName action will be triggered:

 

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)
}

Video control does not pause video
Knowledge base: Guides from the Tumult Team
(Bas) #8

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


#9

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


(Keith) #10

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)
  }
}

(Jonathan Deutsch) #11

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.


(Keith) #12

Make sense. Cool. Thanks!!