Mobile Movie
Playing Video On Portable Devices
HTML5 video is support in the latest versions of Firefox, Google Chrome, Internet Explorer and Apple's Safari. Until some sort of standard format is aggreed on, its necessary to provide at least three formats to make sure the movie will play in all the popular browsers. These are MP4, OGV and WebM.
HTML5 Video Player
Its more or less essential to set the preload attribute to none for portable devices and the addition of a poster image helps to add some visual appeal to the page in addition to giving the visitor an idea of what the movie is about. If you only have one movie on the page, and its set to autoplay, the poster image is not required but it doesn't make sense since iOS devices ignore this instruction and the page download time will suffer.
The video-element can be given a fixed size but this would need to have a maximum width of 300px for the iPhone in portrait mode. The movie can be made to increase in size in proportion to the device screen width by expressing the width as a percentage. The one on this page has its width set to 50 percent and the height to auto. Although this means that the movie frame is only about 150px wide on an iPhone, this device will play it in full screen when clicked. The iPad control bar has a fullscreen option.
<video class="video-element"
preload="none"
controls="controls"
poster="media/video/poster.jpg">
<source src="media/video/H5.ogv" type="video/ogg" />
<source src="media/video/H5.mp4" type="video/mp4" />
<source src="media/video/H5.webm" type="video/webm" />
</video>
To use an inline style to create a fixed size movie, add this to the code above in place of the class attribute...
style="height:200px; width: 300px;"
Note that the player on this page also has its alignment and padding set in the main stylesheet to position it correctly in relation to the text.
Here's how the player looks on the iPhone in fullscreen, landscape mode with the controls showing.
iOS devices show the poster image with a play button superimposed on it since the controls don't load with the page.
HTML5 is not supported in older browsers such as IE V 7 and 8. If the website is going to be viewed on personal computers which may be running these antiquated versions its necessary to use a player that has the capability to fallback to flash.
Click HERE to see an example of an HTML5 video which expands and contracts to fit the browser width.
Video Player with Flash Fallback
The example show here uses flowplayer which is very versatile and has a lot of customizing options. One advantage is that its not necessary to provide the alternative file types since it will fallback to flash in Firefox and Internet Explorer.
This version has a splash image which the visitor can click to start the movie. Autobuffer is set to false so that the video file won't load with the web page and autoplay is set to true so that the movie starts when the image is clicked.
This player uses a custom made control bar rather than one of the available default ones.
Click HERE to see an example of flowplayer on a mobile website.
Click HERE to find out how to create flowplayer with step by step instructions and to download all the required assets.
Vimeo and YouTube
Movies uploaded to Vimeo and YouTube are easily incorporate in a website using the embed code provided. Its possible to make them expand and contract in an elastic fashion by using JQuery.Click HERE for more info and an example.
