From HTML5 Builder
Jump to: navigation, search
MediaHomeCinema.php (sample application).
MediaAnimals.php (sample application).

The Media component provides a media player for audio and video files.

You can use it to play movies and songs, develop complex media players, or even combine it with an Canvas to apply visual effects to a video; all without relying on heavy client-side plugins like Flash.


In order for the Media component to work properly, you must provide at least a list of Sources, as well as a MediaType (video by default).

Control from JavaScript

The media player can display client-side playback controls (defined by the web browser), but you can also choose not to display controls at all (set ShowControls to false), and use client-side properties and methods to control the playback. That way you can define your own controls.

Note: You can display the client-side controls and control the playback from JavaScript, they are not mutually exclusive.

Stop the Download

To stop the download of the media file, pause its playback and empty its source:

var component = $('#ComponentName').get()[0];
component.src = "";

Playback Ranges

You can specify a playback range on the URL of a source file using a hashtag (#) with the following syntax: #t=[starttime],[endtime]. The time can be specified as a floating-point value in seconds (10.5 means 10 and a half seconds) or as a list of hours, minutes and seconds separated by colons (02:30:00 means 2 hours and a half). Both the start and end times are optional, their absence meaning from the beginning and until the end respectively.

For example:

  • movie.wav#t=60, would skip the first minute of playback.
  • movie.mp4#t=,01:00:00 would play only the first hour.

Client-side Features

DOM Elements

The component generates the following client-side DOM elements:

Client-side Events

Documented in the RPCL Reference.

Server-side Features

Properties, Methods and Events

Documented in the RPCL Reference.

Help Resources

Sample Applications

On the HTML5 folder inside the sample applications directory you will find two forms showcasing the Media component:

  • MediaAnimals.php. Plays the sounds of different animals when you click on their photo.
  • MediaHomeCinema.php. Lets you play three different short movies, and choose the movie to be played dynamically (from JavaScript).

Video Tutorials

Frequently Encountered Problems

Internet Explorer 9 does not support the control

Make sure the document mode is IE9 Standards, and not Quirks, IE8 Standards or IE9 Standards. You can change the document mode from the menu bar of the Developer Tools widget (F12).

See Also