## 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

- elements: video, audio, source
- attributes and IDL/properties: controls, loop, autoplay, src, media, type
- properties/IDLs: paused, ended, muted, volume, currentTime, duration, buffered1, currentSrc, readyState, networkState, videoHeight2, videoWidth2
- methods: play, pause, load (mediaLoad3), canPlayType 4
- events: loadedmetadata, play, pause, playing, canplay, ended, waiting, timeupdate, progress, emptied, volumechange, durationchange

- 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

- 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 configure Jarisplayer. 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.

### 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

- elements: track
- attributes and IDL/properties: kind, src, srclang, label, default
- properties/IDLs: readystate, track, textTracks
- methods: addTextTrack
- events: cuechange, enter, exit, addtrack, removetrack
- corresponding interfaces: TextTrackList1, TextTrack2, TextTrackCueList, TextTrackCue including the TrextTrackCue constructor

- 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

You need a modern Browser or install the Flash Plugin or simply download the video (mp4, webm)

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

You need a modern Browser or install the Flash Plugin

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

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

#### 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.

See also our responsive/custom styleable Mediaplayer example

## 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() ; }); }) ;`

### Simple demos/cookbook

- Player with some custom controls using input[type="range"]
- Working with the TextTrack API

### Links about mediaelements

- Video (Dive Into HTML5)