html5 / flash video player

Question

I'm working on a website in which I'm going to embed some videos. Are there any good open source html5 / flash video players around so I can avoid having to code up one of my own from scratch?

EDIT: Note that I'm going to have a very small number of videos, probably no more than 5 or so, so format maintenance isn't really a problem.

Answer 1

I have always used Flowplayer (http://flowplayer.org/) for embedding flash video into a website, which is under the GPL for non-commercial and commercial use.

HTML5 is on its way to becoming mainstream, but has yet to display global support. The main problem lies in which browser supports which codec (For example, you'd have to use OGG/Theora on Firefox, and H.264 on Chrome/Safari... and then there's IE, which doesn't support anything).

Flash just works, so with the current state of browsers, I'd recommend that.

Answer 2

OpenVideoPlayer for Flash is led by Akamai, whereas Adobe and Akamai are now working together on OSMF, a one player framework focussed on best practices.

Answer 3

To elaborate on Chris's answer as well, the different companies that make these browsers are all under the impression that their format is the right format. Also, the new IE (ie9) will support HTML5 video, and this will use H.264 (source).

Until these companies reach a consensus and quit fighting like babies, I say stay clear of the video tag.

Answer 4

I would say go ahead and use the video element, if you have a manageable number of videos as you will need to have each one in 3 different formats, Ogg, H.264 and FLV. If you don't want to do that, then just use Flash.

If you want to go ahead and use HTML5 and the video element, check out using the video element to see how.

Answer 5

There’s a couple of nice HTML5 players with Flash fallbacks:

• Video for Everybody
• VideoJS

I’ve used neither, but they look good.

Answer 6

I would suggest flowplayer too, but as a back up for IE only, so that you don't lose the iPhone and iPad and other flash incompatible browser users.

I would use html like this:

<video id="video" 
  width="640" height="480"
  poster=“/videos/movie_poster.jpg” 
  controls 
  autoplay 
  onclick="this.play();"
>
 <source src=“/videos/movie.mp4” />
 <source src=“/videos/movie.ogv” />
 <a id="player" href=“/videos/movie.mp4” style="display:block;width:640px;height:480px;"></a>
</video>

And have FlowPlayer loaded to play the <a> tag. So, browsers that can do html5 video won't load flowplayer,and browsers that don't do html5 video will just load flowplayer. I've tested this and it works on IE, Firefox, Safari, mobile safari, and Android Desire browser (whatever that is). Likely it would work with other Android browsers too.