Skip to content
This repository

HTML5 & Flash Video Player

branch: master

Merge pull request #18 from Pike/master

support gecko mozRequestFullScreen api.
latest commit f7b96fc2ba
Alex MacCaw authored
Octocat-spinner-32 images first commit May 25, 2010
Octocat-spinner-32 javascripts support mozRequestFullScreen experimental api September 09, 2011
Octocat-spinner-32 media add FlareVideo to git May 27, 2010
Octocat-spinner-32 stylesheets first commit May 25, 2010
Octocat-spinner-32 .gitignore add FlareVideo to git May 27, 2010
Octocat-spinner-32 MIT-LICENSE first commit May 25, 2010
Octocat-spinner-32 README.markdown first commit May 25, 2010
Octocat-spinner-32 TODO first commit May 25, 2010
Octocat-spinner-32 index.html different test video May 25, 2010
README.markdown

Features

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

Formats

Format supported depends on your browser.

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

Browser support

  • Safari
  • Firefox
  • IE 7 >=

Examples

jQuery(function($){
  var fv = $("#video").flareVideo();
  fv.load([
    {
      src:  'http://your/site.mp4',
      type: 'video/mp4'
    },
  ]);
});

Requirements

Usage

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.

API

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.

jQuery.flareVideo(options);

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

FlareVideo#load(sources)

Self explanatory:

FlareVideo#play
FlareVideo#pause
FlareVideo#stop
FlareVideo#togglePlay
FlareVideo#fullScreen(state = true)
FlareVideo#toggleFullScreen

Seek to position in video

FlareVideo#seek(position)

Set video volume, number between 0.0 and 1.0

FlareVideo#setVolume(volume)

Remove video from the DOM

FlareVideo#remove

Events

Add callback for when FlareVideo is setup

FlareVideo#ready(func)

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.

FlareVideo#onplay(callback)

Theming

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

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.

Something went wrong with that request. Please try again.