Media
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.
Usage
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.pause();
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:
- Wrapper (HTMLDivElement). Full web browser support. Access it with
$("#ComponentName_outer").get()[0].- Main element:
- For MediaType=mtAudio: (HTMLAudioElement). Wide browser support. Access it with:
$("#ComponentName").get()[0]. - For MediaType=mtVideo: (HTMLVideoElement). Wide browser support. Access it with:
$("#ComponentName").get()[0].
- For MediaType=mtAudio: (HTMLAudioElement). Wide browser support. Access it with:
- Main element:
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
- HTML5 Builder support for Canvas, Storage & Audio/Video.
- 1:55 — Overview of MediaHomeCinema.php.
- 3:15 — Overview of MediaAnimals.php.
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).