Lectures Notes : Video

Slide 1 : 1/31: From New Media to The Web

COMP1710 Web Development and Design

Video for The Web

Click here to start or press 's'tart or 'i',

then 'n'ext or 'b'ack

Click here for the 't'able of Content

Slide 2 : ToC : Video

Table of Contents (31 slides) for the presentation :

Video

• Slide 1 : From New Media to The Web
• Slide 2 : ToC : Video
• Slide 3 : Video for The Web
• Slide 4 : Video on The Web ...
• Slide 5 : Video on The Web - What for?
• Slide 6 : Video: From TV to DV
• Slide 7 : DV 720x576 an Intermediate Codec
• Slide 8 : Compression Methods
• Slide 9 : Downloading vs Streaming
• Slide 10 : Streaming
• Slide 11 : Sources
• Slide 12 : Using a video Camera to Shoot Video
• Slide 13 : Software tools for editing video
• Slide 14 : Editing your project
• Slide 15 : File Formats for Video
• Slide 16 : Codec
• Slide 17 : Codec (2): the trendy new ones
• Slide 18 : Parameters
• Slide 19 : Size
• Slide 20 : Size Examples
• Slide 21 : Size Summary
• Slide 22 : Frame Rates
• Slide 23 : Streaming Set Up
• Slide 24 : Bandwidth usage at the server side
• Slide 25 : Multicasting... the Network
• Slide 26 : Multicasting - Unicasting
• Slide 27 : Multicasting !!!
• Slide 28 : Inline video
• Slide 29 : Inline video  ... PAGEotX
• Slide 30 : Inline video
• Slide 31 : ToC : Video

Slide 3 : 3/31: Video for The Web

In this lecture: Video for The Web

Video

• What for, where from

• File format (architecture)

• Codec

• Distribution

• Integration

Slide 4 : 4/31: Video on The Web ...

Video on The Web ...

The highest possible multimedia experience for today: image, voice, music, motion

Not always more efficient, but often more attractive, even fascinating

Easier to get away from a book than from the TV (?)

Video on the web remains at an early stage: Bandwidth & Architecture issues

some application on local area networks (within a school, university, organisation)

E.g.: IP Phone Training Video

new and better codecs

Slide 5 : 5/31: Video on The Web - What for?

Video on The Web - What for?

Telling a story

Entertaining viewer (Simpsons and such)

Explaining a process (Science)

Discovery channel

Personalizing the Web experience

Live events

Steve Jobs keynote

On demand Video

Slide 6 : 6/31: Video: From TV to DV

Video: From (4/3)TV to DV

Television in Australia: PAL - 625 lines at 25 fps

NTSC (USA, Canada, Japan) 525 line, 30 fps

Secam: in France and other countries that wanted to be incompatible with the rest of the world :-)

Albania, Benin, Bulgaria, Congo, former Czechoslovakia, Djibouti, Egypt, France, French Guiana, Gabon, Greece (also PAL), Guadeloupe, Haiti, Hungary, Iran, Iraq, Ivory Coast, Lebanon, Libya, Luxembourg (also PAL), Madagascar, Martinique, Mauritius, Monaco (also PAL), Mongolia, Morocco, New Caledonia, Niger, Poland, Reunion, Romania, Saudi Arabia (also PAL), Senegal, Syria, Tahiti, Togo, Tunisia, the former USSR, Viet Nam, & Zaire.

PAL:  (Phase Alternation by Line)

Line Frequency 15.625 kHz (1/((1/25)/625))

PAL countries include: Afghanistan, Algeria, Argentina (PAL-N), Australia, Austria, Bahrain, Bangladesh, Belgium, Brunei, Cameroon, Canary Islands, China, Cyprus, Denmark, Finland, Germany, Ghana, Gibraltar, Greece (also Secam), Hong Kong, Iceland, India, Indonesia, Ireland, Israel, Italy, Jordan, Kenya, North Korea, Kuwait, Liberia, Luxembourg (also Secam), Madeira, New Zealand, Nigeria, Norway, Oman, Pakistan, Paraguay (PAL-N), Portugal, Qatar, Saudi Arabia (also Secam), Sierra Leone, Singapore, South Africa, Spain, Sri Lanka, Sudan, Swaziland, Tanzania, Thailand, Turkey, Uganda, United Arab Emirates, United Kingdom, Uruguay (PAL-N), Yemen (the former Yemen Arab Republic was PAL, and the former People's Democratic Republic of Yemen was NTSC, Yugoslavia, Zambia, Zimbabwe.

Brazil wanted to be really different and uses PAL-M which is essentially PAL at NTSC line and frame rates.

The signal sent is analog

Continuous stream of data

For more about Pal/Secam vs NTSC: http://www.videointerchange.com/pal_secam_conversions.htm

Slide 7 : 7/31: DV 720x576 an Intermediate Codec

DV (PAL): 720x576 - one possible source: an "Intermediate Codec"

or 702x576 (camera) or 768x576 (square pixel picture source on a computer to squish into the DV format) or 704x576 (DVD)

Snapshot (Frame) of the event 25 time per second

414,720 pixels per frame - 10 Mpixel per second - 36-GB per hour per per sample (6 to 12 samples per pixel, 8 bits per samples) - 214 - 428 GB per hour without the sound

As usual, compression is there to improve such raw numbers to 3 MBytes/sec or 25 Mbits/sec (1 GB = 5 min)

Like MJPEG, DV is an intra-frame compression format. They both compress only a single frame at a time.

Data saved on DV cartridge

Digital video's audio: CD quality

DV NTSC: 720x480 at 29.97 fps (=> 640x480)

For More about Digital Video and conversion issues (and the fact that pixels are often not square): http://www.uwasa.fi/~f76998/video/conversion/

For More about Digital Video and Image Formats: http://www.zerocut.com/tech/vid_img.htm

The Best introduction to Digital Video for the Web: http://stream.uen.org/medsol/digvid/html/mainmenu.html

Slide 8 : 8/31: Compression Methods

Compression Methods

Frame size (from 720x576), then application of a video codec

low res DVD: 352x576

VCD, DVD, H.261 + H.263 (CIF): 352x288

H.261 + H.263 (QCIF): 176x144

NTSC: 320x240

Repetition and patterns

Averaging

Range Reduction

Frame difference

Key frame (every 100 frames or so) + differences

The Best introduction to Digital Video for the Web: http://stream.uen.org/medsol/digvid/html/mainmenu.html

Slide 9 : 9/31: Downloading vs Streaming

Downloading vs Streaming

Downloading

Get the file onto the hard disk, then play it

Fast-Start Downloading

• Start Downloading the file on the hard disk

• Get an estimate of the downloading speed

• Begin Playing the movie as soon as the rest of the download will take less time than playing the length of the movie

Data remains on the hard disk for repeated viewing without a need for bandwidth consumption

Starts relatively quickly if the compression is adjusted to the user available bandwidth (could be done automatically)

Those two first solutions work with any web server

Streaming

Slide 10 : 10/31: Streaming

Streaming

(+) Display as soon as it arrives (after some data buffering)

(-) Lower quality, as dropped data is tolerated

(+/-) Not stored on the computer

(+) Easier to deal with copyright issues

(-) You have to reload it again and again

(+) Direct access to any point in the video (especially good for long videos)

(+) Live events (needs to work with multicasting)

Really need to adjust the data rate to the user bandwidth

Use of a special protocol: Real Time Streaming Protocol: RTSP

E.g. Apple TV

Slide 11 : 11/31: Sources

Sources

N.B.: Copyright issues: stronger than ever

Slide 12 : 12/31: Using a video Camera to Shoot Video

Using a video Camera to Shoot Video

Know your purpose

Use a tripod

Beware of the background

Watch the light

Use an external Microphone

Zoom In for close Shots (small resolution on the web)

Use DV (and remain digital all the way: Firewire)

Shoot Several Takes

Shoot some B-roll (adjacent scenes or subject matter)

When transferring to the computer, don't copy everything

DV: 1 GB = 5 min

Slide 13 : 13/31: Software tools for editing video

Software tools for editing video

High End: Integration of Hardware and Software

Avid Meda Composer

US$ 25,000

Television station and video producers

Mid Range

US$ 6,000

Final cut pro. Media 100 syatem

Consumer Level

iMovie, EditDV or AdobePremiere

More than enough for the web target

Slide 14 : 14/31: Editing your project

Editing your project

Draw a storyboard

Capture the clips in the editor

Import the other media elements, such as still images or additional sound/music

Trim the clip to the right length

Arrange the clips and other elements along a timeline.

Add titles, effects and transitions

Add audio narration and music

Save the completed video in the proper format for the web, compressing in the process

Remember to preview and revise your work along the way

Slide 15 : 15/31: File Formats for Video

File Formats for Video (not codecs)

Chose your Media Architecture

Downloaded file formats

Quicktime (.mov) from Apple

More than Video and Sounds

very open standard codec oriented (Mpeg4)

Moving Picture Experts Group MPEG (.mpeg)

1, 2, 2 Layer 3, 4 , 7, 21

MPEG defines both the file format and the codecs

Audio-Video Interleaved (.avi) from Microsoft/Intel

Quite visible today because the DivX Codec was developed initially within that architecture

Replaced by microsoft .asf

Streamed video

RealVideo (.ram) from RealNetworks

QuickTime (.mov) from Apple

open source Quicktime Streaming Server

same price whatever the number of clients

Windows Media (.asf: Active Streaming Format) from Microsoft (Widows Media Architecture)

MPEG

For More: http://stream.uen.org/medsol/digvid/html/2B_mediaarchitecture.html

For More: http://www.discreet.com/support/codec/

Slide 16 : 16/31: Codec

Codec

Example of Codecs included in Quicktime 6.5

The targeted codecs are designed for distribution Animation: computer generated images Cinepak: CDrom era Sorenson rebirth of Apple on the net H263 Real time video conf MPEG4 H264 (2005 QT7) DV or MJPEG are are Intermediate Codecs

For More: http://www.synthetic-ap.com/qt/codec1.html
and http://www.synthetic-ap.com/qt/codec2.html

Slide 17 : 17/31: Codec (2): the trendy new ones

Codecs (2): the trendy new ones

3ivX Delta 3.5, available from www.3ivx.com

DIVX codec a.k.a. "OpenDivX.component"

H.263 (included in QuickTime) (Note: Apple VC H.263 is a modified version used for iChat AV, which doesn't seem to work for creating movie files)

MPEG-4 (if you have MacOS 10.2 "Jaguar" and Quicktime Pro 6)

On2 VP3 Video 3.2, available from www.vp3.com

Pixlet (if you have MacOS 10.3 "Panther")

Sorenson Video version 2.20.304 (included in QuickTime)

Sorenson Video version 3.10.101 (Standard) (included in QuickTime)

ZyGoVideo Basic, available from www.zygovideo.com

H264 new video codec

Codec Comparisons: In early 2002 - 3ivX winner in the 320x240 resolution

My advice: keep to standard codecs: MPEG-4 (DivX is quite well known too), or H264

For More: their comparison http://home.earthlink.net/~mrob/pub/codecs.html

Slide 18 : 18/31: Parameters

Parameters

File formats

Size

Frame Rate

Select to give best possible quality for a given fixed data rate.

Select to give best possible quality for a given fixed total data size.

Video codecs

Audio codecs

Qualcomm Purevoice: voice

Q-Design Music: music

aac: advanced audio codec part of MPEG4

Slide 19 : 19/31: Size

Size (FYI)

Source: http://www.iki.fi/znark/video/conversion/

Slide 20 : 20/31: Size Examples

Size Examples: How Much Will Fit (FYI)

Source: http://stream.uen.org/medsol/digvid/html/D7_howmuchfit.html

Slide 21 : 21/31: Size Summary

Size Summary

Source : http://stream.uen.org/medsol/digvid/

Slide 22 : 22/31: Frame Rates

Frame Rates

The Frame Rate of a movie is measured by the number of frames per second that a movie plays back.

"Full motion" means that all the frames and fields of picture information for a given standard are present.

NTSC TV runs at approximately 30fps (actually 29.97fps - don't ask)

PAL TV runs at 25fps (12.5: DSL, 6.25 :slow modems)

FILM runs at 24fps

The higher the frame rate, the smoother and better quality the movie appears.

The higher the frame rate, the wider the Internet pipeline must be in order for the movie to play without dropping frames or sputtering.

Source : http://stream.uen.org/medsol/digvid/html/3B_videoframerate.html

Slide 23 : 23/31: Streaming Set Up

Streaming Set Up

Session Description Protocol (SDP) Files

Darwin Streaming Server: Open Source

Slide 24 : 24/31: Bandwidth usage at the server side

Bandwidth usage at the server side (FYI)

Function of the Video output and number of users

In kbps, then Mbps

N.B.: AARNET Backbone Canberra-Sydney, or Canberra-Melbourne: 18 Mbps

Slide 25 : 25/31: Multicasting... the Network

Multicasting - the Network

Slide 26 : 26/31: Multicasting - Unicasting

Multicasting - Unicasting

Slide 27 : 27/31: Multicasting !!!

Multicasting

Slide 28 : 28/31: Inline video

Inline video

Slide 29 : 29/31: Inline video  ... PAGEotX

Inline video  ... PAGEotX

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
  WIDTH="192" HEIGHT="160" 
  CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
 <PARAM name="SRC" VALUE="video/extrait_2_qt_modem.mov">
 <PARAM name="AUTOPLAY" VALUE="false">
 <PARAM name="CONTROLLER" VALUE="true">
 <PARAM name="SCALE" VALUE="aspect">
 <EMBED src="video/extrait_2_qt_modem.mov"
   WIDTH="192" HEIGHT="160" 
   SCALE="aspect" AUTOPLAY="false"    
   CONTROLLER="true" 
   LOOP="false" 
   PLUGINSPAGE="http://www.apple.com/quicktime/download/"    
   KIOSKMODE="false">
 </EMBED>
</OBJECT>

All the attributes : http://www.apple.com/quicktime/authoring/embed2.html

From Embed to Object : http://dopey.gcsu.edu/QT_embed_object_tags/

The <object> Element

The width and height attributes of the object element should match the size of the movie in pixels.

The classid attribute uniquely identifies the player software to use. It must be set to "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B". This unique code identifies an ActiveX control that must be installed on the users PC before the movie can be played. If the user does not have the ActiveX control installed, the browser can automatically download and install it.

The codebase attribute specifies the base path used to resolve relative URIs specified by the classid, data, and archive attributes. When absent, its default value is the base URI of the current document. Note: Internet Explorer uses this attribute to specify a location from where the player can be downloaded. It must be set to "http://www.apple.com/qtactivex/qtplugin.cab". This location will always contain the latest version of the QuickTime player.

The src parameter should point to the movie file.

The autoplay parameter should have the value "true" if you want the movie to play automatically.

The controller parameter should have the value "false" if you don't want the control buttons to show.

The <embed> Element

The embed element is added to support browsers that don't support the object element. A browser that understands the object element will ignore the embed element. The object element will be used by new browsers that support ActiveX controls (Internet Explorer 5 and 6). Older browsers (Netscape 4 and 5) will use the embed element.

The width and height attributes of the embed element should match the size of the movie in pixels.

The autoplay and controller attributes of the embed element should be set to the same values as for the parameters in the object element.

The pluginspage attribute defines the player's download path. It must be set to "http://www.apple.com/quicktime/download/".

Slide 30 : 30/31: Inline video

Other tricks about QuickTime

QT is track-based

http://www.apple.com/quicktime/pro/tutorials.html

Each track represents a unique aspect or ability that you can change over time. A single movie may have many different track types, including video, audio, text, sprite, Flash, HREF, hinting, QuickTime VR, and chapter divisions. Each track, in turn, may possess many modifiable properties.

HREF Track

http://www.apple.com/quicktime/tutorials/hreftracks.html

An HREF track is a text track that adds interactivity to a QuickTime movie, and contain URLs ...
with examples: http://web.uvic.ca/akeller/pw408/d_qt_link_to_web_pages.html

More interactivity

http://www.apple.com/quicktime/technologies/interactivity/

MakeRefMovie X

Creates alternate movies for various internet connection speeds, CPUs, languages, and more. This version runs on Mac OS X and allows you to create a reference movie that supports QuickTime 6/7.

http://developer.apple.com/quicktime/quicktimeintro/tools/

Playlist

Can creare a playlist of movies: http://www.qtbridge.com/pageot/qtnext/Sequence_eng.html, other tools are also available.

Slide 31 : ToC : Video

Table of Contents (31 slides) for the presentation :

Video

• Slide 1 : From New Media to The Web
• Slide 2 : ToC : Video
• Slide 3 : Video for The Web
• Slide 4 : Video on The Web ...
• Slide 5 : Video on The Web - What for?
• Slide 6 : Video: From TV to DV
• Slide 7 : DV 720x576 an Intermediate Codec
• Slide 8 : Compression Methods
• Slide 9 : Downloading vs Streaming
• Slide 10 : Streaming
• Slide 11 : Sources
• Slide 12 : Using a video Camera to Shoot Video
• Slide 13 : Software tools for editing video
• Slide 14 : Editing your project
• Slide 15 : File Formats for Video
• Slide 16 : Codec
• Slide 17 : Codec (2): the trendy new ones
• Slide 18 : Parameters
• Slide 19 : Size
• Slide 20 : Size Examples
• Slide 21 : Size Summary
• Slide 22 : Frame Rates
• Slide 23 : Streaming Set Up
• Slide 24 : Bandwidth usage at the server side
• Slide 25 : Multicasting... the Network
• Slide 26 : Multicasting - Unicasting
• Slide 27 : Multicasting !!!
• Slide 28 : Inline video
• Slide 29 : Inline video  ... PAGEotX
• Slide 30 : Inline video
• Slide 31 : ToC : Video