(Last Updated: November 15, 2017)

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. You no longer need to install third-party plug-ins or player applications. In the previous article, we’ve learned the ways to add audio to animation with Saola Animate. Today’s article will show you how to add video to HTML5 animation.

Add 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. That way, you directly create a video element into which a video is embedded.

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. These attributes 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 audio 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. That way, 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 audio formats, please see Media formats for HTML audio and video on MDN.

Saola Animate use the <video> element to embed video. It offers 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 <audio>. 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

Note:

  • 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 article will show you different ways to control media playback. Don’t miss it out! Follow our blog to receive email notifications for new posts. Try Saola Animate today and create engaging media-rich HTML5 animation.

Join our mailing list to receive the latest news and updates from our team.

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

Pin It on Pinterest