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.
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.
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.
A new document of that type is then created and opened.
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.
Drag an instance of the Video component onto the Stage.
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.
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.
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.
To test your hosted video playback, choose Control > Test from the application menu.
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.