DIGI 220 - Audiovisual Content

VIU Media Studies Department - Robin Davies

Lecture Overview

  • The Multi-talented Web Producer
  • Codecs and MIME types
  • Content Hosters
  • File Association
  • Browser plug-ins/helpers/applications
  • Embedding Media in HTML

The Multi-talented Web Producer

building blocks showing the various file formats which are built upon the HTML foundation

The seamless stacking of multimedia upon an HTML foundation further complicates the role of the web designer/producer by requiring an expanded skill set.

Suddenly Web Producers are not just coders and image creators, but also audio and video editors, content doctors, and masters of various codecs and MIME types.


A codec is an algorithm for intelligently compressing media for storage and transmission on the WWW, and then decompressing for appreciation by an end user.

  • Codecs can be lossless or lossy
  • Some media and some codecs take a very long time in the compression process
  • Decompression is typically done almost instantly
  • Codecs should be carefully chosen to ensure maximum accessibility to the encoded content!
  • The use of a specific codec results in the creation of a specific type of file

MIME Types

Multipurpose Internet Mail Extensions describe files as they are transmitted around the Internet.

Among other things, MIME allows e-mail to contain multiple objects in a single message, non-ASCII characters and non-English languages, multiple fonts, and of course multimedia objects like images, audio and video.

Read the full historical article on MIME, and read up on possible MIME types.

Content Hosters

Based on this discussion of Codecs and MIME types, services such as YouTube or SoundCloud are useful for a number of reasons:

  • Easy creation/provision of numerous media formats
  • Hosting/storage of media on an external server
  • Built-in playback system/container/skin for media
  • SEO for media via tags, commenting, SN integration
  • In addition, the use of Flash- or script-based players sometimes deters users trying to appropriate content

OS File Association

What happens when you double click a file on your Desktop?

  • Your Operating System will determine the answer to this question
  • The extension of the file will play a role in the OS's decision
  • A given file type is often supported by many applications
    • A .html file could open with one of a number of browsers, or Notepad, or Dreamweaver...
    • A .jpg file could open with Photoshop, or Paint, or Preview, or GIMP
  • Typically the OS will allow you to set and change File Associations via "Open With..." or the Registry

Browser File Association

What happens when you click a hyperlink to a non-HTML file in your web browser?

  • Each browser has its own recipe for dealing with this situation
  • Based on their MIME types, files will be:
    • displayed in the browser itself, typically using a plug-in
    • saved to the user's computer
    • opened with a helper application

Let's look at how Firefox and Chrome handle these issues.

Applications in Firefox

Each Content Type is associated with an action by the browser, such as:

  • Save File (if Firefox isn't able to render the contents)
  • Preview in Firefox
  • Always Ask
  • Use QuickTimePlug-in 7.6.6 (in Firefox)
  • Use Mail
  • Use VLC

More information about this panel can be found on mozilla.org.

Plug-ins in Chrome

Embedding Media in HTML

  • An alternative to hyperlinking to a non-HTML file
  • By building the media right into the web page, you can control the media's presentation in terms of:
    • size/format
    • layout
    • playback controls
    • alternatives (graceful degradation)
  • MIME types are still examined by the browser
  • A plug-in or application will be given control over a small portion of the browser's window to display content

Embedding Methods

There are a number of HTML elements which have been and can be used to place multimedia content in a web page, such as:

  • embed
  • object
  • iframe
  • audio
  • video


  • embed is intended for multimedia content which will be dealt with by a plug-in/application
  • note that embed is self-closing, and uses a MIME type

<embed style="border: 5px solid yellow;" src="horiztrails.swf" type="application/x-shockwave-flash" height="93" width="300" />

The content above may or may not work in your browser. There are fewer and fewer reasons to use embed in a modern browser. Some content may need to be updated to run at all.

object I

  • object is very similar to embed
  • Conceivably, object could be used to place an image in an HTML document, though we have the dedicated img element for that purpose

<object width="186" height="45" data="htmlblocks.png" type="image/png"></object>

object II

Your browser does not display PDF content. Too bad! You could access the file directly.
  • Unlike embed, object does not self-close
  • The content between opening and closing tags can be used to display alternate content

<object width="400" height="350" data="test.pdf" type="application/pdf">Your browser does not display PDF content. Too bad! You could <a href="test.pdf">access the file directly</a>.</object>


Instead of just linking to a YouTube page like this, http://www.youtube.com/watch?v=YLCJ48lKJHE, we can include an iframe element in our page:

<iframe width="300" src="http://www.youtube.com/embed/YLCJ48lKJHE" frameborder="0" allowfullscreen></iframe>

Look at the src attribute for iframe, http://www.youtube.com/embed/YLCJ48lKJHE, which is a complete HTML page on its own (and try validating this page!).

audio and video

  • As with the img element, audio and video have emerged as standardized methods of including specific media formats
  • Remember browsers generally support a number of image formats painlessly, in a self-closing tag:
    <img src="blocks.png" />
  • The audio and video elements are required to have other elements (and attributes) inside them, and there are sometimes multiple media formats required to ensure display of a given piece of content in all browsers:
<audio controls>
 <source src="html5.ogg" type="audio/ogg" />
 <source src="html5.mp3" type="audio/mpeg" />
 Please download the <a href="html5.mp3">source file</a> directly.
  • We will look at the use of these two elements in our lab for today

Javascript for Multimedia

  • There are Javascript methods of including multimedia content via GUI players, and dynamic HTML and CSS scripting
  • Compared to the use of an HTML element, these JS methods are more complex to build and render in the browser
  • Scripting of this nature is beyond the scope of this course, though there are many third party plug and play systems to explore such as jQuery, or Pizzicato.js.