(Last Updated: March 5, 2018)

With HTML5, using audio and video on a web page has never been that easy. Today, we’ll find the answer to the question “How to play audio and video with HTML5”. As a powerfully easy HTML5 authoring tool, Saola Animate lets you control media playback effortlessly.

This tutorial covers:

  1. Player Controls
  2. Buttons
  3. Autoplay
  4. Timeline Triggers
  5. Playback Animations

Controlling Media Playback

Media playback can be initiated manually by user gestures, such as a mouse click. On the other hand, it can start off automatically by certain attributes and methods. This tutorial lists out five ways to control media playback with Saola Animate. The first two require user actions to play or pause the content, whereas the rest enables you to control media playback without user control.

Note: Automatic playback can cause usability problems. For example, a web page contains background music that plays as soon as it loads. It can be annoying for those in a public setting such as the library or for those using screen readers. Therefore, be careful when handling media playback automatically.

1. Player Controls

Player controls, also known as media controls, lets you in control of media playback. The built-in player controls can differ in the look and function between browsers, but you’ll find nothing too surprising. There are typically a play/pause toggle, a seek bar, a time counter, and a volume control.

control media playback 1

You can display the player controls with the controls attribute (Properties pane > Media section > Controls).

control media playback 2

2. Buttons

Besides the built-in player controls, you can create your own controls using events and actions. This comes in handy when you want to customize the look and feel of the controls or create more buttons to play the content.

To create a button, normally you use the Mouse Click event to trigger an action. Saola Animate offers a long list of Media actions to play, pause, mute, change volume, etc. For example, using the Toggle Play/Pause Media action, you can create a play/pause button to alternate between play and pause functionality.

  • Start Media: Start the playback of the audio or video.
  • Continue Media: Resume the playback of the audio or video.
  • Continue Media From: Resume the playback of the audio or video from a specific time.
  • Pause Media: Pause the playback of the audio or video.
  • Pause Media From: Jump to and pause at a specific time of the audio or video.
  • Mute Media: Mute the audio or video.
  • Media Volume: Change the volume of the audio or video.
  • Toggle Mute Media: Mute or unmute the audio or video.
  • Mute All Media: Mute all audio and video element in a scene.
  • Toggle Play/Pause Media: Toggle the playback of the audio or video.
  • Seek Media: Jump to a specific time of the audio or video without affecting whether it is playing or paused.
  • Play Video Full Screen: Play the video in full screen.

Anything beyond these can be done with the support of custom JavaScript functions. Go to the Functions pane and create your own functions to fulfill your needs.

3. Autoplay

Autoplay tells the browser to start playing a media file once it loads. Enable autoplay by selecting the Autoplay check box in the Media section.

control media playback 3

Regarding the autoplay attribute, there are two things you need to mind. First, mobile browsers commonly ignore this attribute to prevent consuming data. Instead, the choice to play audio or video is user-driven, meaning that you must explicitly trigger the playback, such as tapping the screen. Second, be careful to use autoplay since unexpected playback can be so annoying.

4. Timeline Triggers

Timeline triggers allow you to control media playback automatically because they are executed without user control. For details about timeline triggers, see Create Interactive HTML5 Content with Events and Actions.

5. Playback Animations

Finally, you can use playback animations to control media playback automatically. Click the Add Playback button to add a playback animation at the Playhead position.

control media playback 4

Select one of the following:

  • Start: Start the playback from the beginning.
  • Continue: Resume the playback from the point where it has already paused.
  • Continue From: Resume the playback from a specific time.
  • Pause: Pause the playback at the current time.
  • Pause At: Jump to and pause at a specific time of the media file.

control media playback 5

Playback animations are editable. Do either of the following:

  • Drag the play or pause icon to where you want the control to take effect.
  • Right-click the play or pause icon or use keyboard shortcuts to cut, copy, or delete the control.
  • Double-click the play or pause icon to change the control (and the playback speed if needed).

Compatibility Note

  • Mobile compatibility: Automatic playback is disabled on mobile browsers. In other words, mobile devices only accept user-initiated playback such as a button click.
  • Timeline compatibility: The playback initiated by autoplay or timeline triggers does ignore triggers. Only playback initiated by playback animation gets along with triggers. Therefore, if you use timeline triggers in your document, be careful not to control audio playback with autoplay or triggers.

So that’s how to control media playback with Saola Animate. Try Saola Animate and create stunning HTML5 animation and rich media content.

Pin It on Pinterest