(Last Updated: March 5, 2018)

HTML5 embeds media content into HTML documents easily using the audio and video elements. That way, adding media to your page is as simple as adding images with no third-party plug-ins or player applications. Today’s tutorial will show you how to add video to HTML5 animation.

This tutorial covers:

  1. Adding Video to HTML5 Animation
  2. Playback Options
  3. Multiple Video Sources for Video Elements

Adding Video to HTML5 Animation

Saola Animate supports importing video with the MP4, M4V, WEBM, OGV extensions. The ways to add video to HTML5 animation are similar to those used for adding audio and adding images. Basically, you can import video into the Resources pane to have your video ready for use. Otherwise, add video to animation using the Canvas and the toolbar to directly create a video element.

Perform one of the following:

  • Drag and drop video into the Resources. Then, drag and drop video onto the Canvas to embed it into documents.
  • In the Resources pane, click the Import button to import video. Then, drag and drop video onto the Canvas to embed it into documents.

add video to html5 animation 1

  • Drag and drop video onto the Canvas.
  • Copy video from your computer and paste it into the Canvas.
  • On the toolbar, click the Video button and choose video from your computer.

add video to html5 animation 2

Note: To delete a video element on the Canvas or in the Elements pane, select it and press DELETE. In that case, the matching video resources in the Resources pane remains the same. If you want to completely remove a video, first make sure it isn’t currently in use. Otherwise, you must delete all elements associated with it before you can delete the resource file from the Resources pane.

Playback Options

Video elements have their unique playback attributes which appear in the Media section of the Properties pane.

add video to html5 animation 3

  • Source: Name of the video.
  • Duration: Duration of the video in milliseconds.
  • Volume: Set the volume of the video in the range [0, 100%]. This property is animatable.
  • Autoplay: Make the video automatically play once it is ready.
  • Loop: Make the video loop and play again once it has finished.
  • Controls: Display the built-in player controls to control video playback.
  • Preload: Preload the video before the document loads. This is selected by default.

Multiple Video Sources for Video Elements

Not all browsers can play all video formats. In fact, there are some video formats this browser supports but that browser does not. So for the best cross-browser consistency, you should provide multiple versions of your video so that the browser can select the most compatible version it can play.

Tip: Get the latest information on browser compatibility on caniuse.com. For information on browser support for different video formats, please see Media formats for HTML audio and video on MDN.

Saola Animate’s video elements offer the multiple video sources feature which lets you include various formats of the same video. In most cases, a single MP4 can cover all the bases for modern browsers supporting HTML5 video. Still, to be on the safe side, include MP4 and WEBM for each video group.

In the Resources pane, whenever you select a media resources, i.e. audio and video, the Media Files widget appears. Using buttons on the right sidebar or in the context menu of the selected format, you can add (1), remove (2), export (3), and preview (4) media formats.

add video to html5 animation 4


  • When adding a new format to a group, if the format has already existed, Saola Animate will ask you to overwrite it.
  • If a group contains only one format, you cannot remove it.

So, that’s how to add video to HTML5 animation. The coming tutorial will show you different ways to control media playback. Don’t miss it out!

Receive the latest news and updates on Saola Animate.

A confirmation email has been sent to your mailbox, please confirm your subscription!

Pin It on Pinterest