CO1552 Web Application Development

1
CO1552 Web Application Development

• Week 10

2
Introduction

• Last week we looked at using sound in our web
  pages.
• This week we finish our look at using Multimedia
  on web pages by looking at
• Video
• Linked to LO3, Syllabus 4 (See Matrix)
• It should be noted that 3 weeks is not nearly
  enough time to spend looking at these things. We
  have only looked at a small range of issues
  effecting use of these things on web pages.

3
What is analog video?

• You have probably all seen analog video before
• You record analog video on VHS casettes
• An analog video contains a series of still
  pictures
• These still pictures are displayed one after the
  other very quickly, giving the impression that
  the pictures are moving

4
What is analog video?

• Analog video depends on the human eye
• The human eye remembers what was seen for a
  certain amount of time
• Analog video displays frames so quickly, that the
  human eye combines all the sequences to give us a
  smooth picture
• The human eye dictates how fast each image should
  be shown before the video becomes smooth

5
What is analog video?

• Each analog video image is known as a frame
• Frames are frequently captured in two fields made
  up of alternating lines of the same image
  (allowing for another improvement in the
  smoothness of the video) this is called
  interlaced video
• For the video to look smooth to humans, there
  needs to be 25-30 frames per second displayed (if
  not, it wouldnt look so smooth to the human eye)
• VHS video has the above features

6
What is digital video?

• Digital video is stored as a sequence of numeric
  codes
• These numeric codes represent the colour and
  intensity of each pixel of the image
• You record digital video on digital media, such
  as hard disks or CD-ROM

7
Digital Video

• Remember, moving video is made up of a series of
  still frames played at 25-30 frames per second
• We are thinking about DIGITAL video here (I.e.
  stored on hard disk)
• Lets consider the issues associated with digital
  video

8
Digital Video

• A single frame (still image) may be 640 pixels
  wide by 480 pixels high
• You may be using 24bits to represent the colour
  of each pixel
• If you were using the above parameters, your
  single frame may be approximately 1 megabyte
  (64048024bits / 8)
• So each second of video (requiring 25-30 frames)
  may be up to 25 or 30 times larger than a single
  frame (I.e. 25 megabytes)
• 1 minute of digital video can be up to 1.5
  Gigabytes

9
Digital Video

• Digital video files are HUGE!
• Even if we have the required amount of hard disk
  space, playing back 25 megabytes per second is
  not practical (especially when we are talking
  about the internet)
• To play a video over the internet, we must reduce
  the file size (significantly)

10
Digital Video

• There are three different problems associated
  with video
• Size of video window
• Frame rate
• Quality of image

11
Size of video window

• Obviously, if an image size is smaller, then it
  will take up less disk space
• Remember, we are attempting to display 25 frames
  per second
• To combat this problem we can,
• Choose a more appropriate window size (smaller)
• Get faster hard disk drives
• Use hardware accelerated playback

12
Size of video window

• Sometimes, it is not so simple as merely reducing
  the size of the video window
• As you are making the image smaller, you are
  attempting to squeeze together different coloured
  pixels
• This may result in your image becoming distorted
• This is something you can try for yourself in
  photoshop. Load a complicated picture, and
  reduce the image size

13
Frame Rates

• If we reduce the number of frames displayed per
  second, then we are going to achieve lower file
  sizes
• However, depending on the size of our image
  window, our video may become more jerky
• The bigger the image, the higher frame rate is
  required to prevent the video from becoming jerky
• The smaller the image, the less frame rates are
  required to keep the video smooth

14
Image Quality

• If you reduce the quality of the image (other
  than making the image size smaller)
• You will receive a smaller file size
• But be aware (and this may be stating an obvious
  fact), that if you reduce the quality of your
  video, it will NOT look as good.

15
Video Compression

• Another way to reduce the file size of video is
  to use compression
• Compression can be provided by hardware or by
  software
• As with any other type of compression, we have
  lossy and lossless data compression
• However, there are lots and lots of different
  compression routines

16
Video Compression

• When a video is compressed, it goes through a
  compression and decompression routine
• When the video is being created, the author
  will compress the video to make the file size
  smaller
• When the video is being played back by a viewer,
  the user will decompress the video to
  reconstruct the video frames
• This gives rise to a special routine known as a
  CODEC

17
Video Compression

• A CODEC stands for COmpressor DECompressor. As
  its name implies its main function is to
• Compress the video while digitising it
• Decompress the video during playback

18
Video Compression

• There are many different video compression
  algorithms (too many to talk about in a single
  lecture)
• It is these different algorithms, and the way in
  which they are applied that differentiate the
  different codecs.
• Different codecs will be able to compress
  different types of video to different file
  sizesyou should try different codecs to minimise
  your video size

19
Analog/Digital Video

• Dont forget that any video scenes are likely to
  also include sound
• So the same problems listed last week in the
  sound lecture apply to video

20
Beginners Guide

• This is a very simplistic view of ripping a
  digital video
• You can take a digital video from an analog or a
  digital source
• You connect your video source to the computer via
  a video capture card
• The newer technologies include something called a
  Firewire card, which allows very fast transfer
  speeds

21
Beginners Guide

• Depending on the speed of your video capture
  card, you may drop various frames from your
  video feed
• This will immediately have an impact on the
  quality of your digital video
• You will also require a video editing/capture
  softwaresuch as Adobe Premiere.

22
Beginners Guide

• Once you have captured the video on to your
  computer, the game is not yet finished
• You should attempt to make the changes so that it
  doesnt take up so much space (as suggested
  earlier in lecture notes)
• Try different image size, frame rates, image
  qualities, different codecs etc etc etc

23
Beginners Guide

• Note that you should not use an obscure codec, as
  you want your video to be observed by others
• If you use an obscure codec, then some people may
  not be able to view your code
• (A codec must be installed on a persons computer
  for the video to be decompressed)
• You should now have a minimised video file, that
  is ready to be added to your web site.

24
Adding Video

• You are now in a position to add the video to
  your website
• But beware, not everybody will be happy if you
  force them to download megabytes of video before
  you let them know
• So always give a warning before you display your
  video

25
Adding Video

• Because you should always give a warning before
  you add video
• To add video to your website is simple
• You simply add a link to your video file
• When a user clicks on the link (be it text or
  image)
• The video file is downloaded, and the displayed
• You should always tell the user how large a
  video file is before they start to download. Not
  everybody has a fast internet connection.

26
Adding Video

• Example,
• lta hrefmyBirthday.avigtMy Birthdaylt/agt
• lta hrefmyParty.mpggtltimg srcbirthdaycake.jpg
  altClick here to view an video of my birthday
  partygtlt/agt

27
Summary

• To summarise this lecture,
• Dont think that I have presented everything
  there is to know about images, sound and video
• Each subject area is a lot more complex,
  theoretical, and detailed than has been presented
• To present all the information to its required
  detail would take weeks, and there is a degree
  dedicated to this (BSc Computing(Multimedia))

28
Summary

• If these notes have wet your appetite
• You can contact Sue Laidlaw, a technician in the
  Department of Computing
• She can give you access to digital recording
  facilities including a video digital camcorder,
  video capture cards, sound capture cards, video
  editing software etc etc
• You must contact Sue before you attempt to do any
  of this within the department.