Start a new topic

How to show an image after the video is finished playing

How to show an image after the video is finished playing

Hi. The VideoDrawable has an onFinishedPlaying function in it, now I want to show an ImageDrawable after the Video is finished playing. I am still learning to learn JavaScript, and I can't imagine how to do it. Can someone please help me. Thanks and God Bless. :)

Every drawable has an enabled property. If you set it to false it won't be visible at first. Inside the onFinishedPlaying function set the property to true and it will show up.

var myImageDrawable = AR.ImageDrawable(..,{enabled: "false"});


onFinishedPlaying: function() {

myImageDrawable.enabled = true;


Have a look at the JS API reference that comes with the SDK that will give you a better idea on what properties and classes are available and what they do. Additionally get yourself familiar with the ADE (included with the SDK) that allows to run, test, debug your AR content in a desktop browser. 

var video = new AR.VideoDrawable("vid.mp4", 1, { offsetX: 0.0001, offsetY: 0.0001, enabled: true }); var imgOne = new AR.ImageResource("startnew.png"); var overlayOne = new AR.ImageDrawable(imgOne, 1, { //offsetX: video.offsetX, //offsetY: video.offsetY, enabled: false }); var pageOne = new AR.Trackable2DObject(this.tracker, "tracker", { drawables: { cam: }, onEnterFieldOfVision: function onEnterFieldOfViewFn () {; }, onFinishedPlaying: function() { alert("I am an alert box!"); video.enabled = false; video.opacity = 0; overlayOne.opacity = 1; overlayOne.enabled = true; } });

I have this code and followed what you said, the video plays once, but the drawable is not appearing, even the alert box is not showing.

the onFinishedPlaying trigger is an property of the AR.VideoDrawable. You will need to move it there.

Have you had a look at the ADE? It will help you understand objects and their properties better and is a good tool to debug your AR content.
Login or Signup to post a comment