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 –Tell a story –Personalize the web site 2. Can I produce the video? 3. How will it impact load time?

What is Video? Video is a series of images played at a certain rate – frame rate Digital Video –Each image consists of a number of pixels depending on size and color depth e.g 700 x 525 pixels = 367,500 at 30 frames/sec = 10,000,000 bits B&W with 1 byte (8 bits = 256 colors) = 10MB => 10 MB per second of video Can adjust size, frame rate and color depth

Video Compression codec – (coder-decoder plugin) Similar to image compression –repetition and patterns –averaging –range reduction –frame difference Several formats –quick-time.mov –Moving Picture Experts Group (mpeg) –.mpg –Audio-Video Interlace -.avi -- Windows Media Video -.wmv

Streaming Video RealVideo -.ram Quicktime -.mov Windows Media -.asf – works with windows media player

Where do you get video Purchase or download (copyright) WebCam Digital video camera – need “Firewire” card/connection to PC Analog video camera – need analog to digital converter Produce –Microsoft MovieMaker (free download) –Microsoft PhotoStory (free download) –Microsoft Powerpoint –Numerous commercial software packages

Producing a Movie From PowerPoint each slide can be saved as a jpeg Or use any series of jpeg photos Photo Story allows putting the images together in a series with titles, transitions, music and audio narration and saving as a video MovieMaker allows putting video clips together with transitions and audio

Download - free –Movie Maker -- Windows Live Movie Maker –(Windows Version 7)

Adding Video to a Web Page Embed (Plugin) Link – New video player window Video is bandwidth intensive –Inform user on what video is about and it’s length –Consider streaming, requires a server action

Embedded Video Do this for your project Link to Video Don’t do this for your project. Two different ways of including video on web page

Copy URL for Link or code for embed You Tube Video

Select Video Location on Page

Select Design Tab and Paste code

Capture You Tube Video select mp4 for video with sound select mp3 for audio only

Strip Audio – mp3 format Video and Audio – mp4 format

Using Movie Maker to produce a movie 1.Design the movie on paper 2.Get images – resize to common size 3.Get music 4.Open Movie Maker application and produce movie a.Sequence b.Titles and text c.Narration d.Transitions between slides and within slide e.Add muisc – your own or “built-in” f.Save movie g.Preview movie

Links To Tutorials Video Tutorials Hard Copy Tutorial

Save As a Project for Future Editing

Save Movie for Computer Save in this format MPEG -4 (mpg4)– not wmv Saving for your web page

Inserting your movie in Dreamweaver Select Insert -> Media -> Plugin

WIIL LOOK LIKE THIS

Produce Video with Movie Maker -- Minimum acceptable for credit: Author present for Peer Review at start of class There is a working link from WebEx Page to the web page containing the movie Movie available for Peer Review At least images that tell a story Movie on a web page in MP4 format Introductory title Ending credits Contains relevant sound On at least some images – Photoshopped Transitions Visual effects Use the features of Movie Maker. Don’t just flip photographs.