How to Get Animate to Play a Hosted Video

When the need arises to play a hosted online video file in Animate, where do you begin? The video file can be hosted on your own server, or any publicly accessible server. You can begin with two important things: a suitable codec and container format, and access to the file URL.

File Format

Though there is no standard file format or codec for video playback on the Web, the most common format is H.264 within a .MP4 file format. Nearly all the videos on the web use this format. 

HTML5 Canvas Document

The first thing to confirm is that you are working in an HTML5 Canvas document within Animate. To create an HTML5 Canvas document, select the Advanced intent from the start screen and choose HTML5 Canvas and then click Create

HTML5 Canvas Document
HTML5 Canvas Document

A new document of that type is then created and opened.

HTML5 Canvas Video Component

Animate comes with a set of components specifically for use with HTML5 Canvas documents. To open the Components Panel, choose Window > Components from the application menu. The Video component can be found within the Video folder.

HTML5 Canvas Video Component
HTML5 Canvas Video Component

Drag an instance of the Video component onto the Stage. 

Component Parameters

With an instance of the Video component now available on the Stage, you can set any parameters that are necessary for the project. Select the Video component instance and click Show Parameters… in the Properties panel. 

Show Parameters option
Show Parameters option

The Component Parameters panel opens. This panel allows you to toggle certain parameters and input values for others. You need to tell the Video component instance where to find the file to load. So, click the pencil icon to the right of the source label.

Set content path
Set content path

In the dialog box that appears, set the hosted path to your video file and click OK. You can also choose to resize your video component instance based on the source dimensions of your video file.

Testing

To test your hosted video playback, choose Control > Test from the application menu. 

Testing your hosted video playback
Testing your hosted video playback

Adobe Animate compiles the project and launches it in your default web browser using a local server to avoid any cross-domain issues that may exist when working with the HTML canvas element.

Note that any components used in an HTML5 Canvas project will actually be DOM elements overlaying the canvas surface in a dedicated overlay container element. They are not part of the canvas element themselves.

Adobe logo

Logige oma kontole sisse