TCLT5 Workshop, Macau, 2008-06-08

Advanced techniques in embedding audio and video files in webpages

Jun Da
Middle Tennessee State University
jda@mtsu.edu
Last updated: 2008-06-02

This tutorial as well as its sample files is available at http://lingua.mtsu.edu/academic/tclt5

1. Target audience

This tutorial is intended for those who

2. Objectives

This tutorial is going to show you

  1. how to embedding audio/video file in a webpage in a (more) user-friendly way;
  2. how to control the apperance of media player window on a webpage; and
  3. how to add some (limited) interactivity over the playing of audio/video files with the help of simple JavaScript snippets.

In our following presentation, we will use Windows Media Player as an example of media application. The same techniques will equally apply if you are going to use other media applications such as QuickTime and RealPlayer, etc.

3. A very quick overview of HTML and media file formats

3.1 HTML source and hyperlink

  1. Sample Page 1: A very simple webpage
  2. How to view the source code
  3. How to add a link

3.2 File formats

  1. Audio
    1. Some common formats: mp3, wav, .mov. rm, etc.
    2. References:
      1. http://en.wikipedia.org/wiki/Audio_file
      2. http://audacity.sourceforge.net/manual-1.2/tutorial_basics_1.html
  2. Video
    1. Some common formats: mpeg, wmv, .rm, .mov, etc.
    2. References:
      1. http://www.w3schools.com/media/media_videoformats.asp (or more generally: http://www.w3schools.com/media/default.asp)
      2. https://www.umw.edu/training/inte/multimedia/video/tutorial/index.htm

4. Embed audio/video file in webpages

4.1 Normal hyperlink to an audio/video file: Helper application

  1. Sample Page 1 (again): The (very) old way of doing things is to add a static link.
  2. Advantage: It is simple and everyone can do it (with the help, for example, webpage authoring tools such as Adobe (Macromedia) Dreamweaver and Microsoft FrontPage).
  3. Disadvantage:
    1. An external media player application (aka helper application) is launched outside the browser window, which may prevent a user from reading the webpage content and listening/viewing the multimedia content at the same time;
    2. The webpage creator/author has hardly any control on how the media file is played/viewed.

4.2 Embed audio/video files with no pop-ups: Inline

  1. Sample Page 2: Embed media file inline
  2. Sample Page 3: Stop auto play!
  3. Sample Page 4: Change media player window size for displaying video
  4. Advantage: The media player window is now inside the webpage and a user can view webpage content and multimedia content at the same time.
  5. Disadvantage:
    1. An intruding media player window, especially when you have many audio/video files on the same page.
    2. The webpage creator/author has only limited control on how the media file is played/viewed. For example, can we tell how many times a visitor has viewed the media file?

4.3 Using <object> instead of <embed> (for better control)

  1. Sample Page 5: Embed media file using <object>
  2. On line tool from University of California, San Francisco
  3. References
    1. Windows MediaPlayer object: http://www.w3schools.com/media/media_playerref.asp
    2. Quicktime object: http://www.w3schools.com/media/media_quicktime.asp
    3. RealVideo: http://www.w3schools.com/media/media_realvideo.asp
  4. Advantage: Webpage author can have more control on users' viewing experience (as we will see next).
  5. Disadvantage: It requires (a little bit) more (JavaScript) knowledge to create such a page.

4.4 Using JavaScript for better control

  1. Sample Page 6: Control playing with JavaScript
  2. Sample Page 7: Have more control: Watch the entire clip
  3. Sample Page 8: Provide 'sound' feedback

5. In the case of creating a page for quiz

  1. Sample Page 9: How many times has the student watched the video clip? Or: Has the student ever watched the video clip?
  2. Sample Page 10: How about hearing the recording only once?
    Problem: Try reloading the page and ...
    Solution: Strict control on the number of playing times can be implemented using server-side technology or client-side cookies.