We Meet the third Saturday of each month at the Sydney Mechanics Institute 240 Pitt St Sydney from 2 pm

What we did

March 2015

The web design meeting this month was all about sound and motion, how do we get great multimedia on our web sites?

We started with a look at how HTML handles media files, from the older HTML 4 tags of object and embed to the new HTML 5 tags of video and audio.

Before HTML 5 the only way to place a video or audio file on a web page was to link to the file via an the a href tag or use the object or embed tag. Both these tags told the browser that it should play the file in the browsers multi-media player.

Examples of these tags

The a href tag="<a href="my-video.mpg4">Watch my video</a >"

The object tag =" <object> width="320" height="240" type="video/x-ms-wmv" data="my-video.wmv" </object>"


 The embed tag= <embed> width="320" height="240" type=my-yourvideo.wmv"</embed>"

With the advent of HTML 5 came the introduction of the video and audio tags. Now inserting a video or audio file is as simple as adding either tag to your html code.

The audio tag=<audio> src-“ myaudio-mp3” controls –“controls”>Your browser does not support HTML 5 audio</audio>

The video tag =<video> src-“ my-video.mp4” height = 320 width =480 controls –“controls”>Your browser does not support HTML 5 video</video>

We moved on to have a good look at how the various attribute’s for these tags and how we can vary them to change items like the display size of the video, displaying controls and determine if the video or audio starts automatically. Followed by a look at file formats. Different browsers like different files so we looked at what media types are used on the web. On the web, small is beautiful but good video eats up megabits.

 So we looked at how we can change settings like the aspect ratio, the size of the video, the frame rate and the bitrate to reduce size while maintaining quality. Once we had an idea of how to edit the video we explored four free video and audio editing programs.

 The first two are mainly video converters
Freemaker at  http://www.freemake.com/free_video_converter/

Hamster Free video Converter at  http://www.hamstersoft.com/free-video-converter/

 Movie Makerat  http://windows.microsoft.com/en-au/windows-live/movie-maker

 Most videos come with an audio track so we looked at Audacity at http://audacity.sourceforge.net/ for audio editing. Then we did some practical work editing a video using all three programs

Then we did some practical work editing a video using all three programs.

Steve South

Sig Leader