Download 12Video2

INF 240 - Web Design
Using Multimedia on the Web
Video - Part 2
Many of the same technologies that have improved the
experience of receiving audio over the Web have been
applied to video as well. E.g. streaming video.
As with audio, we have the option of simply linking a
video to the Web page for download and playback, or
choosing from a number of streaming technologies.
Many of the principles for developing and delivering
video content for the Web are the same as those for
audio.
- In fact, some of the file formats are the same
as well, such as QuickTime, and Windows Media.
Like audio, video may be in analog or digital formats.
- To use video in a multimedia application for the
Web, it must be in digital form.
Digital Video
Digital video - a sequence of raster (aka bit-mapped)
images (i.e. frames) displayed in rapid succession at a
constant rate to create the impression of movement.
Some characteristics of video:
Frame size = width
pixels)
x
height in pixels (E.g. 640
x
480
Frame rate = number of frames displayed per second
(e.g. between 12-30 fps - depending on application.)
Colour Depth – number of bits used to describe a colour
pixel - 24 bits.
Illustration of video frames
Frame Sequence
Uncompressed video requires many
second.
megabytes per
E.g. Digital video, frame size 640 x 480 pixels, 24-bit
colour, 30 fps
≈ 22 MB per second ≈ 1.3 GB per minute of video
Need for compression!
Making choices - Optimization
Need to make two major decisions about how to present
video on the Web:
1. Format: Do you want to present your media in
QuickTime, Windows Media or another format?
- Each format has its own strengths and
weaknesses.
- Flash is currently the standard.
2. Compression Methods: Once you have chosen a
format, you will need to decide how much to compress
the video.
- The more you compress, the smaller the file
sizes will be, and the easier it will be for users with slow
Internet connections to access the video.
Most compression schemes are lossy, e.g. MPEG, and use
complicated algorithms that remove data for sound and
image detail that is not discernible to the human ear or
eye.
Compression Techniques for Video
Video is basically the same as a still image/picture,
although, in video, there are lots of images.
Video data contains Spatial and Temporal compressions
• How does video compression work?
• Within each Frame
 Spatial Compression
• Between Frames  Temporal Compression
Spatial versus Temporal Compression
• Spatial – treats each frame as an independent image.
– Compress each frame individually.
– Uses the same techniques as JPEG image
compression.
• Temporal
– Saves all information for selected frames only
(called keyframes – usually selected to be about 3
secs. apart).
– For all other frames, saves the differences from
the previous keyframe.
– Good when the difference between current frame
and keyframe is small.
The keyframes are used as “masters” against which the
subsequent frames are compared.
Videos without a lot of motion, such as talking head
clips, take the best advantage of temporal compression .
Videos with pans and other motion are compressed less
efficiently.
K
D
D
D
K
Frame sequence
K = keyframe
D = difference frame
D
D
D
Video Codecs
There are a number of codecs
(aka compression/decompression algorithms) that can be
used to compress video files for the Web.
Many of these codecs can be applied to several
different file formats.
Video (like audio) on a Web page may be delivered over
a network
- as a downloaded file
- as a streamed file
- as a progressive download (psuedo-streamed) file
When video is streamed, it is played as it arrives.
Streaming allows live video broadcasts, but requires
sufficient bandwidth to deliver the video frames fast
enough to be played.
Progressive download means that the video starts playing
when the time taken to download the remaining frames
of the video is less than the time it will take to play the
whole video.
The popularity and power of the Flash browser plug-in
and standalone Flash Player made Flash an alternative
for custom players and interactive media.
However, HTML 5 + CSS 3 have features to provide an
alternative to Flash. And Adobe have stopped supporting
Flash in favour of HTML 5 + CSS 3
www.webmonkey.com/blog/Adobe_Fights_Off_HTML5_Threat_With_New_F
lash_Player_10DOT1
www.ibm.com/developerworks/library/x-html5/?ca=dgrlnxw01NewHTML
Video Transfer for the Web
Two types of Video Transfer
HTTP
RTSP
Hypertext Transfer Protocol
Real-Time Streaming Protocol
Download the video from the
host (server) to the user’s
computer in its entirety before
playing.
• Played in real time on the
user’s computer in a process called
“streaming”.
• RTSP allows the user to perform
tasks such as pause and play
Video, just like audio, may be delivered over a network
as a downloaded file, or it may be streamed or it may
be delivered by progressive download.
Progressive download
Streaming Video
Videos may be downloaded (via HTTP) or streamed using
a number of streaming server software packages,
including the QuickTime, Windows Media and Flash
Streaming servers.
Example (using a Flash streamer)
http://www.edenhouse.com/
Streaming Video in Web Pages
As in audio, streaming video is added to Web pages via
linked or embedded reference files (also known as
metafiles).
The process is exactly the same for video as for audio.
Flash became pre-dominate for streaming video.
Viewing Video on the Web (applies to Audio as well)
Summary:
1. Files downloaded to the user's computer, and only then begin to play.
•
Large files, long wait times
2. Progressive download. A click begins the download, but after some
portion had been downloaded, the movie would start to play,
The player (e.g. Windows Media Player) calculates the speed of the download,
and guesses when to start playing the portion it has. The plan is to start
late enough that the whole movie will be downloaded by the time you
finish watching it.
3. True Streaming: File is not downloaded at all - media begins to play as
soon as it gets the first packets of video data.
•
Fastest but requires that the server be set up to serve streaming media
•
Reduces waiting time required of the user
•
Drawback: congestion on Internet may cause the media to stall, if the
downloading process cannot keep up with the playback process.
Questions?