(Last Updated: July 9, 2018)

Using the HTML5 video element, adding videos 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 videos to HTML5 animation.

This tutorial covers:

  1. Adding Videos
  2. Playback Options
  3. Resource Groups for Videos

Adding Videos

Saola Animate supports importing video with the MP4, M4V, WEBM, and OGV extensions. The ways to add videos to HTML5 animation are similar to those used for adding audio and adding images. Do one of the following:

  • Directly drag or copy videos from your computer onto the Canvas.
  • Click the Video button on the toolbar, then select one or more videos that you want.

There are more than one way to add videos to HTML5 animation.

  • Click the Element menu > Video. Alternatively, you can right-click the Canvas > Element > Video.
  • Import videos into the Resources pane to store and make them ready for use afterward. To do so, drag videos into the pane or click the Import button. After that, you can drag videos onto the Canvas or right-click them > Add to Scene.

Renaming Video Elements

You may want to rename a video element after adding it to a scene. Do one of the following:

  • Double-click the video element’s name in the Timeline or the Elements pane. Then, enter a new name.
  • Go to the Properties pane > General > Name and rename the element.

Removing Video Elements

If you don’t want a video element any more, select it on the Canvas or in the Elements pane and press DELETE to remove it. Be aware that you cannot delete an element in the Timeline pane.

Note: Even if you delete a video element on the Canvas, the corresponding video still remains in the Resources pane. To completely remove a video , you must delete all video elements associated with it. Then, delete the video from the Resources pane.

Playback Options

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

Video playback options appear in the Properties pane.

  • 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: Allow the video to automatically play on the timeline and desktop browsers.
  • Loop: Make the video replay automatically from the beginning after it finishes.
  • Controls: Display the default player controls for the video.
  • Preload: Preload the video before the document loads. This is selected by default.

Resource Groups for Videos

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 formats of a single video so that the browser can select the most compatible format 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, select a video and access the Media Files widget.

Use video resource groups to provide the best cross-browser compatibility.

  • Add formats to groups: Click Add to add additional formats to a group. If the format has already existed, you will be asked to overwrite it.
  • Remove formats from groups: Select a format and press DELETE or click Delete to remove it from a group. If a group contains only one format, you cannot remove it.
  • Export formats: Select a format and click Export to export it to file. Provide the file name for the file before exporting.
  • Preview formats: Double-click a format to preview it in the Preview window. Alternatively, click Preview on the toolbar or in the context menu.

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

Pin It on Pinterest