Playing Movies On Portable Devices

Out of the many possibilities for showing movies so that they are viewable on portable devices and personal computers, three are considered here.

Movies For All Devices

The video player on this page uses FlowPlayer with a splash image so that the movie file doesn't have to load with the webpage. The width has been set at 300 pixels so that it will fit into the smallest screen in portrait mode. Visitors using devices with larger screens can use the fullscreen button to get a better viewing experience.

video poster

Flow player is a very popular website media player and has a vast range of customizing options. It will fallback to flash on personal computers using outdated browsers.

Start out with the free version and get a license if you want to use it commercially and/or remove the logo and change skins.

The player can be loaded with a splash image which can include descriptive text and a play button if you want to get fancy.

Flowplayer can be customized to fit in with any website design. There are various skin options and its possible to create a completely unique control bar without actually having to know how to do it!

The movie file should be an MP4 prepared for internet streaming using fast start and H.264 compression. If the website has been designed as a mobile version of an existing site and the majority of visitors are going to be using portable devices, the movie can use a file format such as .3gp.

Elastic Movies

The other two methods allow the video container to expand and contract with browser width.

The one shown HERE is an HTML5 version which also uses the HTML5Shiv for older versions of Internet Explorer.

For those who don't host their own movies, a method of allowing the fixed iframe embed codes used by Vimeo and YouTube to be converted to a fluid style is shown HERE.