Skip to content
Dave Hall edited this page Aug 22, 2016 · 1 revision

html5media API

html5media provides a simple API to allow additional customization and control.

Place any references to the html5media API in a separate <script> tag in the <head> of your document, after the html5media <script> tag.

Custom flowplayer.swf

html5media uses the open-source version of Flowplayer as a fallback flash player. If you've got your own commercial license for Flowplayer that you'd like to use instead, then you can specify alternate versions of the Flowplayer SWF files to use.

html5media.flowplayerSwf = "/path/to/your/flowplayer.swf";
html5media.flowplayerControlsSwf = "/path/to/your/flowplayer.controls.swf";

Custom flowplayer configuration

html5media provides a hook to customise the Flowplayer configuration. You can edit the default flowplayer configuration by defining the following function:

/**
 * This callback should return the updated Flowplayer configuration.
 * The default implementation leaves the generated configuration intact.
 */
html5media.configureFlowplayer = function(element, config) {
    return config;
}

Forcing the flash fallback

html5media will normally only use the flash fallback when the browser cannot use a native player. However, it's possible to force html5media to use the flash fallback globally, or for a specific browser or element.

As a simple case, the following code will force the fallback for all elements in all browsers.

html5media.forceFallback = function(tagName, element) {
    return true;  // Always use the fallback.
}

As another example, the following code will only force the fallback for Internet Explorer.

html5media.forceFallback = function(tagName, element) {
    return (/MSIE (\d+.\d+);/.test(navigator.userAgent));
}

Custom CSS class names for flash fallback

Target the flash fallback player with custom CSS class names.

html5media.videoFallbackClass = "html5media-video-fallback";
html5media.audioFallbackClass = "html5media-audio-fallback";

Dynamically generated video and audio tags

Whenever you create dynamic <video> and <audio> tags using javascript, always call html5media() to create the fallback players for legacy browsers.

createSomeDynamicVideoTags();  // Create the dynamic media tags.
html5media();  // Create fallbacks for legacy browsers.