maccman / flarevideo Goto Github PK

View Code? Open in Web Editor NEW

243.0 13.0 42.0 518 KB

HTML5 & Flash Video Player

Home Page: http://flarevideo.com

License: MIT License

ActionScript 16.28% JavaScript 83.72%

flarevideo's Introduction

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

flarevideo's People

Contributors

Stargazers

Watchers

flarevideo's Issues

RealPlayer HTML5Video Downloader.

First off, I want to say that I hate RealPlayer and any other HTML5 browser-hijacking video extensions (I'm looking at you, DivX HTML5 player).

But - in Windows, on Chrome, the RealPlayer HTML5Video Downloader extension that automatically is installed when a user installs RealPlayer permanently pauses the video. I suspect it has a similar effect on the other browsers it's installed on. It's been driving me up the wall trying to find a way to detect/disable it. I have a mac and haven't been able to test it on other Window's browsers (and I really don't want to download the Mac version onto my computer as it's a parasite of an application), but it renders FlareVideo unusable at the moment.

Autoplay doesn't work in Flash

If the autoplay option is set true, this doesn't make the Flash based player auto play.

Stray alert() or no documentation on how to disable

Line 377, in the FlareVideo.eiTriggerReady definition, there's a alert('ready').

I don't see any way to (or if I even should) disable this outside of editing the source.

mp3 Player

Are you going to add an mp3 player too? This would kick some serious ass.

Is posible to play Youtube/Vimeo videos???

That is.. is posible to play Youtube and/or Vimeo videos using this player???

Width and height are reversed for flash (Flarevideo.js line 320)

See topic.

Google Chrome Freezes at end of play

Has anyone notice that it freezes Google Chrome at the end of every play.

Handle multiple video on single page

I'm trying to figure out how to show multiple videos on a single page. Is there a more elegant way of doing this?

<body>
<div id="video">path to video here</div>
<div id="video">http://eribium.org/osgroup/flarevideo/flarevideo/examples/volcano.mp3 </div>
<script type="text/javascript" charset="utf-8">
jQuery(function($){
$('div').each(function(index) {
alert(index + ': ' + $(this).text());
fv = $('#video',this).flareVideo();
fv.load([
{
src: $(this).text(),
type: 'video/mp4',
autoplay: 'true'
}
]);

});
})

</script>
</body>

Switching between standard and full-screen mode halts video playback in Firefox.

I am using Firefox 3.6.3 on OS X 10.5.8

When I try to resize to full screen while the video is playing it halts the video (screen goes black) and playback does not resume even after pressing the Play button.

This does not appear to be a problem in Safari, so I'm guessing this is a Firefox oddity.

used html5 video tag somewhere and used flash somewhere else

Hi,I used this plugin in open-wekit-sharp(a .net wraper for webkit) and in my computer uses video tag but in other computers uses flash ,furthermore when with that webkit browser i navigate to flarevideo.com it uses flash !!!!
in my computer when it uses flash there is no problem but in other computers that flash player 11 is installed the player does not work ,even the buttons does not show ! please help me.

flashSrc option is being ignored

If I sat a different path using flashSrc, it isn't used. The default is used instead.

spotify\vol-min.png & spotify\full-screen.png missing

Although it doesn't appear that this project gets much attention I thought I'd post this issue anyway.

Spacebar no longer works?

Hey there.

When using FlareVideo on my site, none of my inputs accept the user of the space bar.

http://maxrider.tmlc.co.uk/

If you click in the textbox at the top of the page and try pressing enter, it will not accept. Yet if you go to the About page and do the same it works.

This also happens on the http://maxrider.tmlc.co.uk/trainers/1/Gavin-Roberts (click add a comment and try pressing the spacebar in the form fields)

Any idea why this would happen?

Cheers

Gavin

FLV videos issue

I use the code below but doesn't works. How i can player FLV videos on the player?

Audio Support

Why not do the same thing for audio?

error in flarevideo.js on line 320

there is a mistake in your code line 320:
width: this.options.height,
height: this.options.width

it should be the oposite :
width: this.options.width,
height: this.options.height

I'm note used to git, so i put this here.
hope it will help

FlareVideo#seek(position)

I need to begin my video at a specific time and I don't have an idea to implement this function in my code.
[code]

[/code]

Someone has an idea ?

Best.

Documentation lists wrong event names

Event names that start with 'on' only work with 'on' omitted.

Such as:

onloaddedata (should be loadeddata)
onended (should be onended)

Flash Fallback wont run

I can't seem to get the flash fallback to run what so ever on anything I test. This includes the actual flarevideo.com website. Anyone else having these issues?

Tested in: IE6 & 7

Thanks.

Player stopped working after latest 11.4 in IE8

Displays a black and white box in IE8 flash not loading, loads but does not play in firefox.
When going to flarevideo.com with IE8 i get error messages:

Message: Expected identifier, string or number
Line: 325
Char: 3
Code: 0
URI: http://flarevideo.com/flarevideo/javascripts/flarevideo.js

and

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727)
Timestamp: Fri, 14 Sep 2012 00:57:03 UTC

Message: Expected identifier, string or number
Line: 325
Char: 3
Code: 0
URI: http://flarevideo.com/flarevideo/javascripts/flarevideo.js

Message: Expected identifier, string or number
Line: 34
Char: 7
Code: 0
URI: http://flarevideo.com/

index.html example - firefox 4 won't load flash fallback

I'm getting

Error - null
console.error("Error - " + this.video.error);

in Firefox with the included index.html example, and the Flash fallback isn't loading. Could it be that the error "now gets delivered to the child <source> elements..." instead of the <video> element? https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox#Error_handling

FlareVideo.play() doesn't work in Firefox 3.6.8 with Flash

Code:

fv.load([{

 poster : null,
 src : "/data/file/foo.m4v", 
 type : 'video/mp4',
 autoplay : true,
 flashSrc : '/swf/FlareVideo.swf',
 width : 960,
 height: 348,
 useNative : true

}]);

fv.bind('loadeddata',function(){ // Using this because autoplay doesn't work in FF 3.6 either
alert('loadeddata');
fv.play(); // Does nussing
});

Autoplay ne fonctionne pas / doesn't work

Bonjour,
Hello,

Il semble que l'autoplay ne fonctionne pas (testé sous IE9 et Chrome10 avec un fichier MP4).
It seems autoplay doesn't work (tested with IE9 and Chrome 10 with MP4 file)

Voici le code utilisé :
This is the used code :

Ai-je fais une erreur ?
It's a mistake of mind ?

J'ai également essayé comme cela :
I've tried also like that :

autoplay : true (sans quote, without quote)

Mais ça ne change rien.
But, nothing change.

Merci.
Thanks and sorry for the english translation (realised without google :-)))

Proisis

maccman / flarevideo Goto Github PK

flarevideo's Introduction

flarevideo's People

Contributors

Stargazers

Watchers

Forkers

flarevideo's Issues

Recommend Projects

Recommend Topics

Recommend Org