Video Player

Background Philosophy

Depending on what type of project, a player should reflect the needs of its content. Is it meant to show short informative clips, or is it meant to draw the spectator into some kind of experience? Personally, I'm not fond of showing controls at all. The reason is that it encourages the user to be inpatient, quickly scroll trough the content and give a negative time experience. However, if the content is produced to be of educational purposes, or contain information that encourages the user to pause or go back, then showing the controls is much more important.

The Flash/Flex Way

This video player was developed in 2009 for a documentation project about the picture framing industry in Sweden. I was trying to make the player satisfy both the needs of a fully controllable player with the needs of being a fully automatic player in kiosk mode (full screen) without any controls. It's playlists, meta information, timing and sequencing is managed via a content management system.

Click on the player to see it in action or press this link.

The player is made to handle videos of different aspect ratios (16:9 or 4:3 in non square pixels). The video player can also be used in a kiosk mode where an XML playlist controls the video sequences in loop mode. When one film is finished the next will start automatically.

The HTML5 Way

The introduction of the <video> tag is a very welcome addition to the HTML standard and makes embedding video very easy. This is how easy it is:


<video width="1024" height="576" poster="source.jpg">
    <source src="source.mp4" type="video/mp4" />
    <source src="source.ogv" type="video/ogg" />
    Your browser does not support the HTML5 video tag,
    <a href="source.mp4">play source instead</a>
</video>

...

Click on the image to see the HTML5 Video Player in action

However, there are still some drawbacks using this method. You'll need at least two versions of the video source including a fallback, a Flash player (preferably looking the same way) for older browsers. The reason is copyright issues I won't go into here. Firefox refuses to play H264 video*. It prefers the ogg format, whereas Safari, iOS (iPhone/iPad) really likes mpeg4 (H264) since Apple was part of developing the codec.

One could also flip the problem around and use a the <video> tag as a fallback for iOS devices. In that case only one source file is needed, the one encodes as MPEG4 (H264).

* Later versions of Firefox is now supporting MPEG4 video (but has still playback problems in Mac)