COMP1710 : Laboratory 6

Version 1.0

1. Objectives

The object of this lab is to edit and assemble some video, compress it and include it on a web page. You will experience too some advanced possibilities of QuickTime by implementing some HREF track and put two QT videos in sequence.

Please note that the submission should be done by uploading your data on a web site, and then sending by mail the URL that points to your work (rather than e-mailing all the files!).

2. Tasks

2.0 Task0

Make sure you have read all the online lecture notes, and especially, about Video

As usual now, create a directory named LABn_Uxxxxxxx  where you will put today's work. Include an index.html file that will link directly or indirectly to all the html pages you will create. There should be a link to that page in all of the pages you will create. There should be your name and a mailto link to your email at the bottom of all your pages.

Important : you should make sure to include a special page named source.html or log.html (sample here) with the list of media you used in your lab, with the type of modification(s) you have done. Please read the rules about borrowing data in the context of COMP1710 labs and assignment

Choose some videos sources to work with from the ones available on "The Oracle" (afp:// appletalk server) in the directory COMP / COMP1710 / LAB6.

When you start iMovie, my advice is to create a new Project on the Desktop. You will save that project to your home directory (over the network) before you log off.

As usual, it is more efficient to work with data which is not remotely stored, and as usually, you don't want to leave it on the desktop at the end of your session, as it will be lost when you log out.

Have a look at the apple iMovie tutorial :

You could possibly consult this second tutorial to an earliest version of iMovie :

2.1 Task1 : produce a Quicktime video

Chose some video from the ones proposed on the Oracle. See the png snapshots (same name as the .mov file) for each video to get a rough idea of the video, without having to download the video itself).

Open iMovie and drag and drop the Quicktime / DV files you choose.

Import the other media elements, such as still images or additional sound/music (you may chose some images from other labs directories on the Oracle).

Trim the clip to the right length.

Arrange the clips and other elements along a timeline.

Add titles, effects, and transitions (there should be at least one of each type in your submission).

Add audio narration and music (if you want to, and have some data to use).

Save the completed video in the proper format for the web.

My suggestion (in 2004) was to choose Quicktime format with Mpeg 4 codec (Share / Quicktime / Expert settings). Size : (180-192)x144 (DV/4)  or 288x216 (3/4 of the Half full square :-) or 270x216 (3/4 of Half DV). Framerate : 12.5 fps.

In 2006, Compare with H264.

Feel free to test different configurations / formats / codecs but do it for a short video as the compression takes some time.

None of your compressed video should end up more than 3 MB !

The full lab size should not be more than 15 MB (the submission will be small, just the URL)!

2.2 Task2 : Inline the Video

Inline that video into an HTML page, with a controller, and in such a way that it will start automatically when the page is loaded. Use CSS to add a border to the video.

Remember my suggestion to use the freeware PAGEot , but don't just use it : have a look at the list of possible attributes (Information section in the previous link).

2.3 Task3 : Video played in turn : play list

Have 3 or 4 small videos ready and put them into a page, where each video is played in turn (at the end of one video, the next one is loaded automatically in the viewer). If you have explored the previous linked page, you should have found a section : "Tutor QuickTime : create a play list with Pageot" (Ignore the "Click on the item Advanced and select Mask, in order to reload films starting from the mask of the navigator" part).


3. Conclusion

Guess what : you have put some video on the Web !

4. Extra work

Export your video into different formats/framerate, and draw your own conclusions as to tradeoff between size and quality etc.

Task4 : HREF track in Quicktime movies

You need Quicktime Pro do do that task, so you have to be in one of the NITA Labs to use it.

Take one new video and add some HREF track to it, using QuickTime Player. The idea is to associate a different link for different sections of the video.

Don't use frame and frameset for this lab. Instead the video will be inlined into a page viewed in a browser window and the linked pages will open in a new window.
Just give any ID type name (without spaces, just alphanumeric characters) to the Target field and the browser should automatically open a new window and name it with the given ID. If you make sure to use always the same ID as the Target, all the pages linked will be opened in the same window.

You may either choose to use the the Automatic behaviour (you don't have to click : the pages open automatically) or to let the user click to open a page different for every section of the video. If you chose the second option, you will make sure to add two text tracks : the HREFTrack (mode 'off') and a visible Text Track ('on'), that will give users some clue about when to click and what the user could expect to get.

For more details about how to do that exercise :

Apple tutorial : (link updated in 2006)

and another good tutorial :


5. Summary: to get 3 marks for this lab session

This week, you may follow exactly the same process as last week to upload your work, or chose to ftp to liskov to do so.

N.B. : For more information about the uploading and access to partch/liskov server, please consult and http://tsg/twiki/bin/view/Documentation/StudentSettingUpWebPages

> scp
   The authenticity of host ' (' can't be established.
   RSA key fingerprint is c8:ad:18:32:da:37:6f:d5:72:ab:c9:8b:8e:e7:f2:59.
   Are you sure you want to continue connecting (yes/no)? yes
   Warning: Permanently added '' (RSA) to the list of known hosts.'s password:  your passwd here                        4% 344KB   13.7KB/s 09:46 ETA                      100% 8404KB   8.7KB/s   16:01                                                                                                                   100% 8404KB   8.7KB/s   16:01    

   >  ssh's password:  your passwd here 

partch:~> cd public_html
partch:~/public_html> ls
partch:~/public_html> unzip
   creating: LAB6_U4032266/
   creating: LAB6_U4032266/testweb/
  inflating: LAB6_U4032266/testweb/back.gif  
  inflating: LAB6_U4032266/testweb/background.gif  
  inflating: LAB6_U4032266/testweb/forward.gif  
   creating: LAB6_U4032266/testweb/fullsize/
  inflating: LAB6_U4032266/testweb/fullsize/2004_04_17_10.02.20.jpg