DIGI 220 - Audiovisual Content
VIU Media Studies Department - Robin Davies
The Multi-talented Web Producer
Codecs and MIME types
Embedding Media in HTML
The Multi-talented Web Producer
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
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.
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
Use QuickTimePlug-in 7.6.6 (in Firefox)
More information about this panel can be found on
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:
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
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 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 is very similar to
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>
Your browser does not display PDF content. Too bad! You could
access the file directly.
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,
, 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!).
As with the
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" />
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:
<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
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.