Play/Pause button on top of HTML5 Canvas Video Component?

[isakl16914924]

I am having enormous trouble getting a simple play button to show on top of a video Component.

I've tried pulling an image in and converting it into a symbol, and using JavaScript snippets to make it function as a play button, but I can't seem to get it to show on top of the video.

When I use the User Interface Components, they seem to show on top of the video, but I can't get it to react through JavaScript.

What I ultimately want is a video Component with an animated GIF as poster image, with a large play button on top, and when you play the video, a functional pause button shows when you hover your mouse over the video. Does anyone know a method where I could get that result?

Maybe I'm bad at searching for solutions myself, but I haven't found any method which works.

Any help is greatly appreciated.

Thanks.

[Joseph Labrecque · Accepted solution]

Hi.

The HTML5 Canvas components all exist in the DOM and overlay the Animate canvas element. So there really isn't a way to overlay canvas-based assets atop a video component instance.

You could *hide* the component until the user clicks something... would that work for you?

[khussie]

How do you customize the controls then? I need to remove some of the buttons and change the playback rate.