Edge Animate supports native HTML5 videos making it easier for you to use your favorite video clips within your compositions. You can control the playback of videos using basic playback actions and JavaScript. Also, you can bind video elements to touch and mouse events to create a rich interactive experience. 

Video playback capabilities are supported in the HTML DOM. This means, the videos can play on any modern desktop or device browser without requiring a plug-in.

You can import .mp4 and .ogv files into Edge Animate.

For the best cross-browser compatibility, include .mp4 and .ogv resources of video elements in your project. For a detailed description of supported video types, visit Media formats supported by the HTML audio and video elements.

Do one of the following:

• Click File > Import or drag-and-drop the video files directly onto the Stage from your file system. A 'video group' with the name of the video file is created in the Library. This video group contains the video file and any fallback files you add for cross-browser compatibility.

Note: Fallback files get automatically grouped under the video group by name when you import them into the composition.

• Click Add Video in your project Library and browse for the video file. Then, drag the video group from the library to the Stage. 

After you add a video to your composition, a 'video element' appears in the Elements panel. Options to control the playback of your video appear in the Properties panel when you select the video element in the Elements panel.

Playback and control video

You can play back and control video using any of the following options:

• Properties panel
  • Autoplay: Allows the video file to automatically play on the timeline and desktop browsers.
  • Loop: Makes the video file loop from the beginning after it finishes playing.

• Timeline
  • Play: Plays the video file from the current playhead position.
  • Play From: Allows you to specify the time marker you want to play the video from.
  • Pause: Allows you to pause the video. Use a play function to resume playback.

• Video actions: Using code snippets in the Actions editor to control video playback through events.

Video actions

Preload video

To preload video files before the composition loads, select “Preload Video” in the Preloading section of the Properties panel on stage.

Note: Preloading video is not available on most mobile devices. See Using video on devices for restrictions. 

Enable the default video player

You can use the browser's default media player to show controls for your video. The default video player is hidden by default. To enable the default player, select the video element and select "Controls" in the Video section of the Properties panel. 

The player skin is rendered by the browsers, and appears different based on the browser it is viewed in. For example, the player you see in Chrome is different than the player you see in Firefox.

When the player is viewed on stage, you can add motion, transform, and other properties to the player like you add for other objects.

Using video on devices

iOS

In Safari on iOS (for all devices, including iPad), where users may be on a cellular network and be charged per data unit, preload, Autoplay, and playback actions are disabled. No data is loaded until the user plays the video.

You can use the video actions to call a video element triggered by a user event. For more information on video actions, see Video actions.

Android

Android generally has the same limitations for videos as iOS.