HTML5 & Flash Video Player
Switch branches/tags
Nothing to show
Clone or download
maccman Merge pull request #18 from Pike/master
support gecko mozRequestFullScreen api.
Latest commit f7b96fc Sep 9, 2011
Failed to load latest commit information.
images first commit May 25, 2010
javascripts support mozRequestFullScreen experimental api Sep 9, 2011
media add FlareVideo to git May 27, 2010
stylesheets first commit May 25, 2010
.gitignore add FlareVideo to git May 27, 2010
MIT-LICENSE first commit May 25, 2010
README.markdown first commit May 25, 2010
TODO first commit May 25, 2010
index.html different test video May 25, 2010



  • HTML5 video with Flash fallback
  • Easy CSS/JS/HTML customization and theming
  • Full screen support
  • Completely open source and free for commercial use


Format supported depends on your browser.

  • All browsers: MP4, FLV
  • Firefox: Ogg
  • Safari: MP4, MOV

###Browser support

  • Safari
  • Firefox
  • IE 7 >=


  var fv = $("#video").flareVideo();
      src:  'http://your/site.mp4',
      type: 'video/mp4'



To use, you need to include all the required JavaScript libraries (above), and then flarevideo.js. You then need to include flarevideo.css, and a theme - such as flarevideo.default.css. Once that is sorted you may need to fix the path to the images in the CSS files, and the path to the swf (flashSrc option).

Then, just follow the examples or API below.


New FlareVideo. Options:

  • autoplay
  • width
  • height
  • poster (src to poster image)
  • preload
  • autobuffer
  • keyShortcut (add listeners for space/escape key events)
  • flashSrc (path to flash file)
  • useNative

Called on a jQuery element.


Load sources: e.g. flareVideo.load([{ src: 'video.mp4', type: 'video/mp4' }]);


Self explanatory:

FlareVideo#fullScreen(state = true)

Seek to position in video


Set video volume, number between 0.0 and 1.0


Remove video from the DOM



Add callback for when FlareVideo is setup


Bind callback to event

FlareVideo#bind(name, callback)

Bind single callback to event

FlareVideo#one(name, callback)

Event types:

  • click
  • dblclick
  • onerror
  • onloadeddata
  • oncanplay
  • ondurationchange
  • ontimeupdate
  • onpause
  • onplay
  • onended
  • onvolumechange

You can also access the events on the FlareVideo instance. e.g.



Take a look at flarevideo.default.css and flarevideo.spotify.css for tips.

You'll need to style both the input range element, and the jQuery UI slider fallback.

When the video player is idle, a class of idle will be added to it. You can hide the controls using that class.

When the video player is playing, a class of playing will be added to it.

The state of the video player is available under the data-state attribute.


Flash is, by default, a fallback when HTML5 video is not supported.

If you pass a relative path as a video file src, Flash will take that relative path from the SWF.

If the video source path you pass is on a separate domain, you will need to set up a crossdomain.xml file.