Copy link to clipboard
Copied
I have a responsive Captivate 2017 project and on one slide I have an event video. I'd like for the project to remain on the slide with the video until the video is done playing, then automatically move to the next slide. I always make custom nav buttons for my projects, so the slide has a 'next' button and a 'previous' button on it, that pause the slide after 3 secs (the extent of the slide timeline).
I also have the video hidden on entering the slide, with a custom play button with an action to show the video. The video is set to autoplay and the timing is set to duration of the video.
My on enter action for the slide is an execute javascript action and in the javascript window I have -
cp.hide("introVideo");
document.getElementsByTagName("introVideo")[0].addEventListener('ended',myFunction,false);
function myFunction(e) {
window.parent.window.cpAPIInterface.next();
}
I'm not sure if my function for moving to the next slide is correct. Though, I also tried just writing
cp.nextSlide():
in my function and that did not work either.
Any advice??
Thanks.
Copy link to clipboard
Copied
I am also trying to advance the slide when the video ends as well. I am using Captivate 2019 on a MacBook Pro. I have tried this and it doesn't work.
window.cpAPIInterface.getElementsByTagName("VideoAction")[0].addEventListener('ended', yourFunction, false);
function yourFunction(e) {
window.cpAPIInterface.next();
}
When debugging locally in Chrome, the error seems to be the property .getElementsByTagName
If anyone has done this before successfully, advice would be greatly appreciated.
Copy link to clipboard
Copied
Hello Maxk
Try document.getElementById("NameOfVideoc");
Get the element with the specified ID: NameOfVideo is the name that you supply in the properties.
You need to add a 'c' in your javascript to the end of the object's ID.
Captivate assigned a name based on the instance name of the text caption,smart shape,video, etc...
Look in the CPM.js. file in assets/js/CPM.js to find the id.
https://helpx.adobe.com/captivate/using/common-js-interface.html
Luis
Copy link to clipboard
Copied
Hello maxk,
correction:
synchronized video only, for event video check the following article
Timeline - Advanced Workflows - Captivate blog
the video player being used is dashjs-player ( more info at Dash Industry Forum)
"The event video is controlled by its control panel".
Execute the following Javascript code on the slide.
document.getElementsByTagName(“video”)[0].addEventListener(‘ended’,yourFunction,false);
function yourFunction(e) {
cp.show(“nextBtn”);
}
Luis
Copy link to clipboard
Copied
Thanks for pointing to my blog.... have explained the difference between event video and slide video over and over again, not only in that post.
Copy link to clipboard
Copied
For event video, you don't need to set up any event listeners manually.
Just make sure that the "Pause slide till end of video" check box on the even video object's Timing tab is ticked (should be by default), that the slide duration is shorter than the length of the video, and that there's nothing else on the slide with a pause point that would prevent the course from progressing. If set up that way, the video will play to the end and the next slide will come up automatically without any user interaction.
Copy link to clipboard
Copied
Thaks Gaanf for that simple explanation. For event video I always keep the default duration of 3 secs for the slide.
Copy link to clipboard
Copied
Thank you Gaanf and Lilybiri! Setting each slide to 3 seconds and the video properties to play the rest of the slide and to pause slide until the video is finished solved the issue. I wanted users to be able to scrub the timeline forward if they needed to and leave the slide after the media has ended. This combination works perfectly without any additional JS.
Copy link to clipboard
Copied
Hi! I have the same setup, but the problem I have is if the learner pauses the video, after 3 seconds it will move on to the next slide. any way to solve this?