Adventures in Information Adding Video to Your Web Site February 24, 1999 Eileen Flick Information Services Division.

Slides:



Advertisements
Similar presentations
MCCS391 - Application Project II Simon, Kuong Chio Ka Ramon, Vu Kai Chio Carl, Iun Sam Meng Presented by: 24 Jan 2002
Advertisements

SETTING UP A PROJECT Adobe Premiere Pro CS6. Getting started… Adobe Premiere Pro project file stores links to all the video and sound files-aka…clips.
Digital Arts and Video Production. Video Editing Tutorials Introduction to Video Editing A basic overview of editing concepts and methods. Linear (Tape.
2.02F Publishing Animated Videos 2.02 Develop Computer Animations.
Chapter 10 Video.
Voice Server. Aspiration Provide a unique service to the members of CCSU. Provide a unique service to the members of CCSU. Provide a Streaming Voice Server.
ITIS 1210 Introduction to Web-Based Information Systems Chapter 36 How Music and Audio Work on the Internet.
How FERNE Uses the Internet: The How’s and Why’s of Videostreaming.
Video Streaming Services Justin Hourigan, Senior Network Engineer, HEAnet Limited
Digital Media Dr. Jim Rowan ITEC 2110 Video. Works because of persistence of vision Fusion frequency –~ 40 frames.
1 Introduction to Computer Science بسم الله الرحمن الرحيم MULTIMEDIA LEVEL -9 King Khalid University Kingdom of Saudi Arabia Ministry of Higher Education.
3.02 Publishing Animations
Multimedia on the Web. Audio Video Animation Interactivity Plug-ins in the users’ computer –Real Player (.ram,.rpm,.avi) –Quicktime (.mov) –Shockwave.
Quicktime Howell Istance School of Computing De Montfort University.
Video on the Web. Should you add video to your web page? Three main questions 1. How will it enhance the purpose of my page? –Entertain –Explain a process.
Different Streaming Technologies. Three major streaming technologies include:
Digital Video Teppo Räisänen LIIKE/OAMK. General Information Originally video material was processed using analog tools Nowadays it is common, that digital.
Val Kelly School of Library & Information Science Kent State University
Remote Surveillance System Presented by: Robarin Holdings Limited Telephone: Facsimile:
Streaming media over the Internet A million channels and there is still nothing on! By Samuel Shiffman Streaming Technologist Seton Hall University
1 Different Video Properties
HYPERTEXT MARKUP LANGUAGE (HTML)
Digital and Streaming VideoDigital and Streaming Video: The Eccles Library Digital Video Studio September 20, 2000 Nancy Lombardo Systems Librarian Eccles.
Digital Video An Introduction to the Digital Signal File Formats Acquisition IEEE 1394.
Video Streaming © Nanda Ganesan, Ph.D..
© Anthony J. Nowakowski, Ph.D. Animation & VideoVideo.
Using Multimedia on the Web
© 2011 Delmar, Cengage Learning Chapter 11 Adding Media and Interactivity with Flash and Spry.
INF Web Design Using Multimedia on the Web Sound - Part 2.
1 Web Developer Foundations: Using XHTML Chapter 10 Helper Applications and Plug-in Concepts.
1 Lecture 12: Multimedia Not in Web 101 Text  Important Multimedia Issues  Audio  Movies and Video  Multimedia and HTML Documents.
© 2011 The McGraw-Hill Companies, Inc. All rights reserved Chapter 6: Video.
Glencoe Introduction to Multimedia Chapter 9 Video 1 Chapter Video 9  Section 9.1 Video in Multimedia  Section 9.2 Work with Video Contents.
Multimedia Concepts: Video Technologies ANALOG DIGITAL.
Session 9: Multimedia J 0394 – Perancangan Situs Web Program Studi Manajemen Program Studi Manajemen Universitas Bina Nusantara.
Animation & Video 1. High labor requirements tend to make animations a costly type of resource. Nontrivial animations usually require a labor-intensive.
2.02G Publishing Animated Videos 2.02 Develop Computer Animations.
Lights, Camera, Action! The Role of Multimedia in Web Applications Leading Multimedia Formats in Use Today What You Need to Know to Include Them in Your.
Chapter 13-Tools for the World Wide Web. Overview Web servers. Web browsers. Web page makers and site builders. Plug-ins and delivery vehicles. Beyond.
Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers.
Chapter 16 Creating Desktop Video and Animation. Getting Started FAQs: – What is digital video? – How do I transfer video footage to my computer? – How.
Sound or Audio, whichever you prefer –MIDI Files.midi or.mid (Musical Instrument Digital Interface) use for instrumental music. –This format is supported.
Audio on the Web Teaching OntheNet 2002 Minneapolis, MN June 23-25, 2002.
Streaming Media At UMBC. What is Streaming? True streaming vs. Playback of downloaded filesTrue streaming A steady flow of data to the client -Buffered.
GIF - Graphics Interchange Format JPEG - Joint Photographic Experts Group PNG - Portable Network Graphics GIF images are limited to the 8 bit palette which.
Adding Audio to Your Web Site Adventures in Information February 17, 1999 presented byEileen Flick, ISD.
MULTIMEDIA TECHNOLOGY SMM 3001 MEDIA - VIDEO. In this chapter How digital video differs from conventional analog video How digital video differs from.
XP Practical PC, 3e Chapter 15 1 Creating Desktop Video and Animation.
Streaming Media A technique for transferring data on the Internet so it can be processed as a steady and continuous stream.
Using Plug-Ins Adding Multimedia to an HTML Document.
Creating Streaming Video Clips for Web-based Instruction Jay Cofield, Ph.D. The university of Montevallo July 9, 2002.
Chapter 10. The Role of Video in Multimedia  Any presentation or application that uses sound and graphics qualifies as multimedia  Clip A segment of.
What is streaming media technology? Don Youngs Florida Conference of The United Methodist Church.
California State University, LA Presented by Amanda Steven StevenAamirObaid.
Chapter 8 Adding Multimedia Content to Web Pages HTML5 & CSS 7 th Edition.
Streaming Media. What is Streaming Media The delivery of audio, video and other multimedia content across the internet using streaming media servers.
Video on the Web.
RENDERING Preparing the Project Exporting the Timeline Video Settings
Creating Desktop Video and Animation
VIDEO.
Web Programming– UFCFB Lecture 8
Digital TV..
3.02 Publishing Animations
Chapter 6: Video.
2.02G Publishing Animated Videos
2.02F Publishing Animated Videos
Chapter 12 Post Production: Linear and Non Linear Editing.
Integrating Multimedia: Sound, Video and More
Chapter 10 Video.
Web Programming– UFCFB Lecture 8
Presentation transcript:

Adventures in Information Adding Video to Your Web Site February 24, 1999 Eileen Flick Information Services Division

Today’s Overview Why ? What ? How ? The goal for today is that you leave here with enough knowledge to be able to start adding video to your website.

Only one reason... Why Add Video? –MOTION!

Why Motion? Visual information / learning Sense of “being there” Create a mood Excite the viewer! Hold interest

Types of Use Video Programs Distance Learning Archives Examples Page Examples Page

What is the Technology? Digitizing Compressing Streaming

Digitizing “Regular” video is an analog signal Computers use digital data Use a ‘digitizing’ or ‘capture’ card to convert the signal into data Just like digitizing audio Except it’s video :)

Compression –Uncompressed video is approximately: 640 x 480 resolution 24 bit color 7,372,800 bits per frame 30 frames per second

Compression Occurs while digitizing and when preparing clips for streaming Reducing the quality reduces the amount of information that must be compressed –320x240, 24 bit, 15fps = Mbps Want to recompress as few as times as possible Most used compressed sizes: –320x240 and 160x120

Codecs (Types of Compression) Intel Indeo –PC platform, not compatible w/Quicktime –doesn’t maintain video quality well MPEG –best compression –only use if end result will be an MPEG file Sorenson –good compression & quality –requires Quicktime 3 Animation –okay if source is computer-generated, not good with videotape source

Video File Formats Quicktime 3 - Mac standard –Cross-platform, good compression (Sorenson) –Must flatten movie for the Web (default Quicktime has two forks, data & resource) –movies can stream AVI - PC (Windows) standard –Audio & video interleaved for better quality –Macs need special apps to play or convert to QT MPEG - UNIX standard –very high compression, good quality –special encoding tools needed for max use –more info:

Streaming Data is played back as it arrives Non streamed clips must download completely before playing back The Analogy … –Streaming is like watching television –Non-Streaming is like renting a movie

Streaming is Good Faster time to initial start of playback Almost no storage space is needed on client computer Random access to stream Capability to send live streams

Streaming is bad Generally lower quality Can be more susceptible to the quality of the network connection Requires more time to encode to get the best quality Requires a special server to get all the benefits of streaming video

True Streaming RealPlayer Web Browser Web Server RealServer Request for meta file pnm meta file Request for stream Stream

Pseudo-Streaming RealPlayer Web Browser Web Server Request for meta file http meta file Request for media file media file media file

How Does One Do All This? Step 1 - Capture/Digitize the Video Step 2 - Encode/Compress it Step 3 - Publish it on the web

Step 1a - Capture the Video - The Hardware - On a PC: First - Video capture card Recommend Osprey 100 or 1000 Miro DC30 is a poor choice for most users Video cards recommended by Real Networks: Second - Enough disk space Recommend 4+ GB drive Third - The Computer As fast as possible 200+ MHz Processor

Capturing the Video - cont’d On a Mac: AV-capable Mac (7600+ or an AV model) 4GB+ hard drive Fast processor (pre-Power PC okay, but verrrry slow) Lots of RAM (at least 64MB, more better) Note on Firewire: –New technology for using peripheral devices, including digitizing video, new G3s use this method –For more info:

Step 1b - Capture the Video - The Software - Only basic functionality is needed Most bundled software is fine On the Mac, that means Apple Video Player:

Capturing Video - software cont’d Use Adobe Premiere if more capabilities are needed (editing, filters, etc) –Available in user rooms for PCs and Macs Other software possibilities: Avid Cinema, Strata VideoShop For real media, can also encode directly (live, as in webcasts) More on capturing video: –Real Media: –Quicktime 3:

Step 2 - Encode the video Must make the Stream vs. Non-Stream decision Non-Stream –QuickTime vs. AVI –QuickTime is more universal –Use Premiere if it’s necessary to re-encode the clip

Step 2 - Encode the Video Streaming Video –RealMedia is recommended solution –Use RealEncoder to encode –One or multiple versions? Who is your audience? –Use Premiere to prepare clips as necessary Add titles, soundtrack, filters

Step 3 - Publish to the Web Non-Streaming –Almost identical to publishing any other document Upload to server then link it in HTML –QuickTime 3 now cross-platform, can be streaming or non-streaming

Step 3 - Publish to the Web Linking the Clip Simple link –File downloads, then plays – link the clip –Let people know format and size: (1.3MB, QT) Embedded link – –Controller & window appear in page –Clip plays while downloading

Step 3 - Publish to the Web Real Media True Streaming –Requires access to RealServer –Move files to content directory At USC, that means the CWIS server –Create meta-files using pnm URL’s –Embed or link to meta-files

Step 3 - Publish to the Web Linking Real Media Reference file in local directory points to a metafile: – real video clip Movie.ram file contain actual clip location: –pnm:// –.ram file is simple text, contains no HTML tags

CWIS Issues RealServer is only available on CWIS Open to any CWIS user/dept Fill out agreement form –Agree to 200 MB limit –Agree to not hog streams HTTP Pseudo-streaming available from any web server

How to Get Setup HTTP Pseudo Stream has no setup! Create content directory Turn in agreement form Link is created to your directory Start streaming!

Use video on your website... … not because it is hard... … but because it is easy! –For more information, and an excellent tutorial, check out: – –