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.

Add video to compositions

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. 
Add Video option in Library
Add Video option in Library

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.
Video controls in Properties panel
Video controls in Properties panel

  • 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 playback options in Timeline
Video playback options in Timeline

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

Video actions

  1. Open the Actions editor by clicking {} adjacent to Stage on the Timeline.

  2. Click a trigger (event).

  3. From the Pick An Action list, click Video, and then click the required action.

    You can also search for an action using the search box in the Pick An Action section.

    Video actions in Actions editor
    Video actions in Actions editor

  4. From the Pick A Target section, click Stage, and then double-click the element or symbol to which you want to assign the selected action.

    You can also search for the element or symbol using the search box in the Pick A Target section.

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. 

Preload video
Preload video

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. 

Enabling default video player in Properties panel
Enabling default video player in 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.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy