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 500 x 500 pixels = 250,000 at 30 frames/sec = 7,500,000 bits B&W with 1 byte (8 bits = 256 colors) = 60MB => 60 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 MovieMaker allows putting images and video clips together with transitions and audio

www.microsoft.com Download - free Movie Maker -- Windows Live Movie Maker (Windows Version 7)

Adding Video to a Web Page Embed => Insert Menu -> HTML5 video 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

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

You Tube Video Click “Share” and embed and copy the code

Select Video Location on Page

Select Code Tab and Paste code

Capture You Tube Video http://www.clipconverter.cc/

Using Movie Maker to produce a movie Design the movie on paper Get images – resize to common size Get music Open Movie Maker application and produce movie Sequence Titles and text Narration Transitions between slides and within slide Add muisc – your own or “built-in” Save movie Preview movie

Links To Tutorials Video Tutorials http://http://www.intowindows.com/windows-live-movie-maker-wlmm-tutorials/

Saving your project in MovieMaker

Save As a Project for Future Editing

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

Before leaving the Lab tonight create a movie with several slides, save as an mp4 and insert in webpage. Link from your WebEx Menu to this webpage. This is just to see that you know how to do this. For the Final Project include a movie on your website to complement your theme as follows . . . .

Movie on a web page in MP4 format Produce Video with Movie Maker -- Minimum acceptable for credit on Final Project: • At least 10-15 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.