CS 50.12 HTML 5 :: Interactive Web Pages

Browser support for video and audio

browsers

3+ 9+ 3.5+ 3+ 10.5+

There are 3 primary formats for Web video

  • mp4 - high quality
  • ogg video - low qualty
  • webm - high quality

Here is a chart showing support for each format:

video formats browser support

Prep - Visit archive of video clips and download mp4 and ogg versions.

Lets begin by downloading a video from the web.

For purposes of this demonstration I visited a website that has video in the mp4 and ogg formats. I chose a short clip of clouds which can be found here

http://www.archive.org/details/C.E.PriceBoilingStormClouds

I downloaded 3 files:

  • boiling_storm_clouds_512kb.mp4
  • boiling_storm_clouds.mpg
  • boiling_storm_clouds.ogg

For those of you who would like to explore all 3 formats and meet the author of our textbook visit this link. I want to caution you that you may want to watch but not download these movies since the file size for thiis video can quickly fill up your student account.

http://www.archive.org/details/PeopleOfHtml5-BruceLawsonwebmVersion

After downloading the files I placed them in the flder where my website is stored. You may want to create a sub folder for the videos, it is up to you.

Step 1 - add HTML code to display this video

In perfect world we would just need one tag and one format for video

<video src="boiling_storm_clouds.ogv">
<p>Your browser does not support HTML5 video.</p>
</video>

This code will work in Firefox, Chrome and Opera but not Safari and IE

Garden Site Step 1

Step 2 - change code so it will play video on all browsers and add controls attribute so video controls will display.

<video controls>
<source src="boiling_storm_clouds_512kb.mp4" type="video/mp4" />
<source src="boiling_storm_clouds.webm" type="video/webm" />
<source src="boiling_storm_clouds.ogv" type="video/ogg" />

<p>Your browser does not support HTML5 video.</p>
</video>

The order of the source tags matters, ipads will try to play the first src file and if that doesn't work, it just stops. Place webm code second because this is a higher quality video and is supported by the same browsers that support ogg, so if folks have a newer version of a browser they can see the webm instead of ogg.

Garden site - step 2

Step 3 - create a sample page that shows how attributes control the video performs

preload - advantage of preloading is that the video plays more quickly, a disadvantage is that if the visitor does not play the video they are still required to dowload the movie and in some cases this will cost them for bandwidth usage. This is especially true for mobile devices.

I have 3 values that can be assigned to the "preload" attribute

preload="none" video will not load until user clicks on play button

preload="auto" this setting allows the browser to decide if it wants to load the video or not. Apple IOS devices do not download videos when preload is set to "auto".

preload="metadata" browsers downloads "matadata" which includeds the first frame, video frame size, and duration, but nothing else. This setting does not help much with buffering the video for quick delivery and at the moment Firefox is the only browsers to support "metadata".

Rule of thumb --- preload the video if the video is the main focus of the page.

autoplay - including this attribute will cause the video to play immediately after the page loads. Autoplay will not work on iphone.

loop - allows the video to play continuously as long as the page is open. This can be annoying, but in some cases it is a design element that works. Firefox does not yet support looping.

Here is how my code looks to date:

<video controls preload="auto" autoplay loop>
<source src="boiling_storm_clouds_512kb.mp4" type="video/mp4" />
<source src="boiling_storm_clouds.webm" type="video/webm" />
<source src="boiling_storm_clouds.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>

Sample video page

Step 4 - add attributes that control how the video dislays

I created a sample file that allows me to add a poster image which will display until the video plays.

<video controls preload="auto" poster="images/clouds-poster.png">

We can also add attributes that control the height and width of the video. This is expecially helpful if you do not have preload set to auto.

<video controls width="400" height="300" preload="none">

You can also use height and width to set a display area that is larger than the video and alter the background color.

<video controls width="240" height="300" preload="auto" style="background-color: #000;">

Sample Video part 2

Step 5 - add embed code so that older versions of the browser can play the video in flash.

Visit this website

http://www.osmf.org/configurator/fmp/

Enter the URL for your video and your poster image, then select Preview. The required code will appear. Place that code on your" live" page after the <source> tags.

<source src="boiling_storm_clouds.ogv" type="video/ogg" />
<object width="400" height="300"> <param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf">
</param><param name="flashvars" value=
..............

</video>

Garden site final version with video and embedded flash code.

Lab Activity - we will all download a video in 2-3 formats and then use the flash embed toold to generate embed code.

Visit this website to search for videos

http://www.archive.org/details/opensource_movies

the clouds video is found

http://www.archive.org/details/C.E.PriceBoilingStormClouds

The site that generates flash code

http://www.osmf.org/configurator/fmp/

Enter the URL for your video and your poster image, then select Preview. The required code will appear. Place that code on your" live" page after the <source> tags.