Remove Video from HTML5 Ad

[Chopwerk]

I am a designer, NOT a coder, but I make html5 banners all the time. This project needs to lead off with video in the ad, and then play the rest of the animation.

I dug around and found a bit of code to load the video:

video = document.createElement('video');

video.src = 'GameMockUp_Clip.mp4'; video.autoplay =true; video.controls=false;

video.volume = 0; var Video = new createjs.Bitmap(video); stage.addChild(Video);

and it works! Now I need to remove the video, but I can't get it to go away. It plays on top of the rest of the animation.

I tried the logical solution:

stage.removeChild(Video);

but this does not work. Help! Time is an issue as of course the client needs this "yesterday". -_-

[JoãoCésar]

Hi.

This works here.

var video = document.createElement('video');
video.src = 'GameMockUp_Clip.mp4';
video.autoplay = true;
video.controls = false;
video.volume = 0;
var canvasVideo = new createjs.Bitmap(video);
stage.addChild(canvasVideo);
setTimeout(function()
{
    stage.removeChild(canvasVideo);
}, 2000);

Please double check your variable names and let us know.

Regards,

JC

[Chopwerk]

João this does work...kind of.  The video plays and then removes itself, however, I'm a time line animator, and I need the the animation to play off the timeline after 5000ms. It seems to be stuck after the video is removed...

[JoãoCésar]

Do you need the video to be removed after 5 seconds and then the timeline should continue playing?

[Chopwerk]

Yes exactly!

[JoãoCésar · Accepted solution]

See if this works:

var that = this;
var video = document.createElement('video');
video.src = 'GameMockUp_Clip.mp4';
video.autoplay = true;
video.controls = false;
video.volume = 0;
var canvasVideo = new createjs.Bitmap(video);
stage.addChild(canvasVideo);
setTimeout(function()
{
    stage.removeChild(canvasVideo);
    that.play();
}, 5000);

[Chopwerk]

Thanks Joao, but it just kills the video and then nothing happens at all. I even tried to force it to play frame 150 ( play(150); )

Collin I tried every derivative of stage.removeChild...video, video, 'video', "Video", etc...

The iron of this all is that I would have been finished hours ago in flash...just delete movie holder from time line. Like I said I'm not a coder and greatly appreciate the help.

[JoãoCésar]

That's because the play function takes no arguments. You have to use gotoAndPlay.

Replace the play line by this and see if it works now.

that.gotoAndPlay(that.timeline.position + 1);

if it doesn't, would you mind sharing your file even if you have to remove and/or replace assets?

Regards,

JC

[Chopwerk]

I messaged you a link

[rosebudd]

I have an Animate Canvas ad with background video. I load and play the video in the HTML file Canvas publishes. The timeline isn't even aware of it. I have validated this in DCM. Jist need a CDN for the video file.

<video autoplay=""  id="bgvid" poster="default.jpg">

      <script>

        var video = document.currentScript.parentElement;

        video.volume = 0;

        </script>

<source type="video/webm" src="video.webm">

<source type="video/mp4" src="video.mp4">

</video>

The CSS. My canvas document is transparent, so it appears overlaid on the video like a window

video {

position: absolute;

top: 140px;

width: 320px;

height: 180px;

z-index: -100;

}

[Chopwerk]

Thanks to all for the help. I finally figured out the problem. The video was playing properly, going to the right frame or playing afterwords, but the images that I was using in the animation where not loading. I made sure that the symbols where on the timeline (and out of frame) so that they would show up later down the time line! Its ugly but it works.

My next question would be whether or not I can put the video on a particular layer so that I can place art above it to smooth out transitions?

[Colin Holgate]

You're adding video as an element, you can do the same with images, and they would be on top of the video. There are ways to make the video be behind everything, but putting an image on top is easier.

[Colin Holgate]

You hopefully have your issue solved by now, but in case what you said:

stage.addChild(Video);

is what was really there, make sure you match the original name. You said 'Video' when I think you mean 'video'.