Using Multimedia on the Web 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 x height in pixels (E.g. 640 x 480 pixels) 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 megabytes per second. 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.

Within each Frame  Spatial Compression 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 – treats each frame as an independent image. 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 D D D Frame sequence K = keyframe D = difference frame

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_Flash_Player_10DOT1 www.ibm.com/developerworks/library/x-html5/?ca=dgr-lnxw01NewHTML

Two types of Video Transfer HTTP RTSP Video Transfer for the Web Two types of Video Transfer HTTP Hypertext Transfer Protocol RTSP 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: Files downloaded to the user's computer, and only then begin to play. Large files, long wait times  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. 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?