Webshims Lib

Polyfill only the incapable browsers

HTML5 audio, video and track elements

Demo/About/Documentation audio and video elements

The mediaelement feature implements the audio, video and source elements including their API and enables playing mp4, mp3, flv, fla etc. media files and playing rtmp streams in incapable browsers.

Implemented/fixed elements, attributes, properties, methods, events

  • 1.buffered is a little bit buggy with youtube videos.
  • 2.videoHeight/videoWidth not supported with youtube videos.
  • 3. mediaLoad is the jQuery plugin method, which corresponds to the native load method (Webshims lib does not override jQuery's own load-method), ( $('video')[0].load() === $('video:first').mediaLoad() ).
  • 4. canPlayType returns "maybe" if native player can't play, but Flash can and is installed. (i.e.: $('video').canPlayType('video/flv') might return "mabe")

Options for the mediaelement feature

  • player 'jwplayer' (default) || 'jaris': Use the free and open source Jarisplayer or JW Player
  • preferFlash (false): If preferFlash is set to true the mediaelements will be replaced by flash, if flash is available. Otherwise only, if mediaelements aren't supported or the current audio/video container/codec isn't supported by the browser.
  • vars (Flahsvars Object): Object with default flashvars to configureJarisplayer or JWPlayer. This general configuration can be changed by using a data-vars attribute, too.
  • changeSWF (Manipulation function): Callback function to also modify the flashvars object for Jarisplayer/JWPlayer.

Extensions/Abstractions to the standard

  • loadMediaSrc (source [, poster]) (jQuery plugin): Removes current audio/video sources adds new source[s] and calls the load method (mediaLoad).
//simple video $("video.my-video").loadMediaSrc("my-video.mp4"); //or video with type $("video.my-video").loadMediaSrc({src: "my-video.mp4", type: "video/mp4"}); or multiple video sources and new poster $("video.my-video").loadMediaSrc( [ {src: "my-video.mp4", type: "video/mp4"}, "my-video.ogg" ], "my-poster.jpg" );

Track Element support

The track feature implements the track element width a WebVTT parser and the corresponding DOM- and JS-APIs.

Implemented/fixed elements, attributes, properties, methods, events

  • 1. Use additional [] to bind events to Array-like objects ($([ $('video').prop('textTracks') ]).on('addtrack', function(e){console.log('track was added');});)
  • 2. Use shimActiveCues instead of activeCues property. In case override is set to true or all track supporting browsers (currently only Chrome 23) won't load the flash- or the youtube iframe fallback for video/audio playback, activeCues can be also used savely.

Options for the track feature

  • override (false): Overrides native track implementation. In case you have to deal with some cross-browser issues with native implementation.
  • positionDisplay (true): Positions the cue display via JavaScript.

Simple Demo

Video example

property value/control
currentTime
duration
progress 0
paused-state true
muted-state false
volume 1
videoWidth/videoHeight -/-
networkState
readyState
controls
currentTime
play
pause
muted
volume
textTrack
loadMediaSrc

Audio example using mp3 only

property value/control
currentTime
duration
progress 0
paused-state true
muted-state false
volume 1
networkState
readyState
controls
currentTime
play
pause
muted
volume

How to...

Playing HLS/RTMP Streams

<video poster="poster.jpg"> <!-- Mac OS / iOS HLS Streaming --> <source src="http://server.com/path/file.m3u8" type="application/x-mpegURL" /> <!-- rtmp streaming: using the data-server attribute --> <source data-server="rtmp://server.com/path/" src="file.mp4" type="video/rtmp" /> <!-- rtmp streaming: using an identifier (i.e.: mp4:) --> <source src="rtmp://server.com/path/identifier:file.mp4" type="video/rtmp" /> </video>

Styling the video/audio elements

Setting dimensions

Webshims lib does not use the width/height content attributes to get the dimensions of your audio/video elements. Instead webshims lib mediaelement implementation only looks for the CSS styles.

If an width-/height- inline style is used, these properties are taken. In this case also % or em units are fully supported. If styles are set through an stylesheet, webshims lib will use the computed styles.

Using additional styles (margin, background, float etc.)

Additional styles like margin, float etc. are not transferred from the audio/video element to the flash-fallback. The best way to use margin, float and other styles is to use an additional wrapper for your mediaelement.

Using custom styleable controls

Webshims lib does not provide custom styleable controls out of the box. Instead webshims lib polyfills the HTML5 API, so that you can easily build your own controls. Simply have a look into the source code of this site, to see how we have build the controls in our demo. If you are interested in a ready-to-use solution for CSS styleable controls, try JME2. JME2 works in all HTML5 browsers without a polyfill and in all browsers including IE6 in conjunction with webshims lib.

Updating JWPlayer/Using licensed JWPlayer

Simply place player.swf into your shims/jwplayer folder.

Changing path to swfobject

$.webshims.modules.swfobject.src = "/path/to/swfobject.js";

Cookbook

Stop other media if media starts to play

$(document).bind('play', function(e){ $('audio, video').not(e.target).pause(); });

Make a simple playlist

<video src="video-1.mp4" data-palylist='["video-2.mp4", "video-3.mp4"]' controls="controls"></video> //get all audio and video files $('video, audio') //with a playlist .filter('[data-playlist]') .each(function(){ //get the playlist array form the data-attribute var playlist = $(this).data('playlist'); //put first source into the playlist array playlist.unshift( $.prop(this, 'src') ); //remember index var index = 0; //if media ends playing.. $(this).bind('ended', function(){ // get next index index++; //if there is no source, we loop to first index if(!playlist[index]){ index = 0; } $(this) //renew source elements and call load-method .loadMediaSrc(playlist[index]) //start playing .play() ; }); }) ;