DF2254 Fundamentals of Web Design :: Art Institute

Week 11: Media, Final Project Lab

HTML5 Video

Prior to HTML5, if developers wanted to include video in a web page, they had to make use of the <object> element, which is a generic container for "foreign objects." Due to browser inconsistencies, they would also need to use the <embed> element and its many parameters.

object element html

The <video> element

One of the major advantages of the HTML5 <video> element is that, finally, video is a full-fledged citizen on the Web, rather than requiring third-party software like Shockwave Player. It’s no longer shunted off to the hinterland of <object> or the non-validating <embed> element.

Including video on a page in HTML5 requires the <video> element:

simple video element

Fallback link

Similar to <object>, you can put fallback markup between the tags, for older Web browsers that do not support native video. You should at least supply a link to the video so users can download it to their hard drives and watch it later on the operating system’s media player.

video element html with fallback

However, this code won’t do anything just yet. All you can see so far is the first frame of the movie. You haven’t told the video to play, and you haven’t told the browser to provide any controls for playing or pausing the video.

Autoplay

You can tell the browser to play the video automatically, but you almost certainly shouldn’t, as many users will find it highly intrusive. Nevertheless, here’s how you do it:

video element html autoplay

Native controls

Providing controls is far better than autoplaying your video. You can tell the browser to provide them automatically (and results will differ according to the browser):

video element html controls

Codecs

Opera and Firefox support Theora and Vorbis. Safari doesn’t, preferring instead to provide native support for the H.264 video codec and MP3 audio. Microsoft has announced that IE9 will also support H.264, which is also supported on iPhone and Android. Google Chrome supports Theora and H.264 video, and Vorbis and MP3 audio.

All of this means that we might need to provide many files for the same video, using different codecs.

The rule is: provide both royalty-free (webM or Theora) and H.264 video in your pages, and both Vorbis and MP3 audio so that nobody gets locked out of your content. To do this, you need to encode your multimedia twice: once as Theora and once as H.264 in the case of video, and in both Vorbis and MP3 for audio.

Then write multiple sources for your media file:

video element html multiple sources

Audio files can be embedded into your HTML5 page in a similar way, but using <audio> tags instead of <video> tags.

More about HTML5 video and audio elements here.

Old School Video and Audio Techniques

All modern browsers should be able to render HTML 5 and its <video> and <audio> elements. Old browsers such as Internet Explorer 8 will still need video and aduio dealt with in prmitive ways.

Flash Video

Flash Video: Converting Video Files into FLV Format

View Slideshow: PPT

View Slideshow: PDF

Download Rabbit.zip

Dreamweaver: Adding Videos in FLV Format

Adobe.tv video tutorial: Adding Multimedia

To insert a video in FLV format:

  1. Insert > Media > FLV...
    • Progressive Download Video
    • Browse for FLV file
    • Select skin for video player
    • Detect Size
    • Auto Play or Auto Rewind?
    • OK
  2. Save HTML file
    • Two SWF files are generated: one for the video itself, and one for the skin
    • A JavaScript file inside a Scripts folder is generated to support the playback of the video
  3. Preview the page in a browser and test the playback

If you do not have an FLV file for your video, use the Flash Media Encoder to easily convert any media file to FLV (see first topic above.)

Dreamweaver: Adding Videos in SWF Format

To insert a video in SWF format:

  1. Insert > Media > SWF
  2. Browse to the SWF file and click OK
  3. Save the HTML file. Dreamweaver informs you that two dependent files, expressInstall.swf and swfobject_modified.js, are being saved to a Scripts folder in your site.

You can set properties for SWF files using the Property inspector. The properties are also applicable to Shockwave movies.

Select a SWF file or a Shockwave movie and set the options in the Property inspector (Window > Properties).

Setting SWF File Properties...

Audio Files in Dreamweaver

You can add sound to a web page. There are several different types of sound files and formats, including .wav, .midi, and .mp3. Some factors to consider before deciding on a format and method for adding sound are its purpose, your audience, file size, sound quality, and differences in browsers.

Note: Sound files are handled very differently and inconsistently by different browsers. You may want instead to add a sound file to a SWF file and then embed the SWF file to improve consistency.

Audio File Formats...

Embedding audio incorporates the sound directly into the page, but the sound only plays if visitors to your site have the appropriate plugin for the chosen sound file. Embed files if you want to use the sound as background music, or if you want to control the volume, the way the player looks on the page, or the beginning and ending points of the sound file.

When incorporating sound files in your web pages, carefully consider their appropriate use in your web site, and how visitors to your site use these media resources. Always provide a control to either enable or disable the playing of the sound, in the event that visitors don’t want to listen to the audio content.

  1. Insert > Media > Plugin
  2. Browse for the audio file and click OK
  3. Enter the width and height by entering the values in the appropriate text boxes in the Properties panel, or by resizing the plugin placeholder in the Document window. These values determine the size at which the audio controls are displayed in the browser.

Student Showcase

We will take a look at your final project and provide feedback before you turn in a final version.

Final Project Lab

See the Final Project page.

The final project is due to the eCompanion dropbox by the end of class in week 11.

REMEMBER! The final project is due by the end of the final class period. It will not be accepted for credit any later. Uploading issues are not an excuse for late work, so start uploading well before the deadline.

Dropbox go to eCompanion

Upload the following by the end of class today:

Week Assignment File Name
11 FINAL PROJECT final.zip