7Lesson 7: Video, Audio and Image Techniques Objectives By the end of this lesson, you will be able to: 2.2.2: Distinguish among and identify the uses and benefits of various graphic file formats, including GIF, GIF89a, JPEG, PNG, TIFF, BMP. 2.2.4: Create and link client-side image maps. 2.2.5: Perform advanced image formatting techniques. 2.2.7: Distinguish between raster and vector graphics. 2.2.8: Scan and edit hard copy sources and images. 2.2.9: Identify steps for creating images, including resolution, format and layers. 2.2.10: Identify benefits and drawbacks of using stock photography. 2.2.11: Create a photo and portfolio management strategy, including online and offline storage, software and services. 2.10.3: Evaluate the benefits and drawbacks of proprietary technologies such as Adobe Flash and Microsoft Silverlight. 2.10.5: Create a basic video file using video capture and editing software. 2.10.6: Insert a video file into a Web page using the HTML5 <video> element and attributes. 2.10.7: Insert an audio file into a Web page using the HTML5 <audio> element and attributes. 7-2 Site Development Associate Pre-Assessment Questions 1. What <video> attribute is used to display an image until the play button is selected or the video loads? a. image-load b. source c. poster d. src 2. Which <audio> attribute specifies that an audio file will continue to play over and over? a. repeat b. loop c. autoplay d. audio/ogg 3. Which syntax is used for defining a circle-shaped hot spot area in an image map? a. coords="x1,y1,x2,y2" b. coords="radius,y1,x1" c. coords="x1,y1,x2,y2,xn,yn" d. coords="x1,y1,radius" © 2014 Certification Partners, LLC — All Rights Reserved. Version 2.1 Lesson 7: Video, Audio and Image Techniques 7-3 Introduction to Web Video, Audio and Image Techniques A primary ingredient of any successful Web page is well-placed video, audio and images. You have already learned about the video, audio and image file formats used on the Web. In this lesson, you will learn more about techniques used in Web pages, including: • The <video> element. • Video format conversion. • The <audio> element. • Image maps. • Image transparency. • Interlacing. • Animation. You will also learn about several methods you can use to create and edit video and images. ® CIW Online Resources – Movie Clips Visit CIW Online at http://education.Certification-Partners.com/CIW to watch a movie clip about this topic. Lesson 7: Video, Audio and Image Techniques OBJECTIVE 2.10.6: Inserting video with <video> The <video> Element NOTE: HTML5 has introduced the <video> element to allow developers a standard method to Plug-ins are no embed video into their Web sites. Prior to the <video> element, browser plug-ins (such as longer required to embed video into Adobe Flash, Microsoft Silverlight or Apple QuickTime) were required to view video. These Web pages. Entire plug-ins are not supported by all browsers or devices, so a standardized way to include courses were dedicated to video was needed. teaching developers how to Embedding video in an HTML5 document is straightforward. See the following code: create content for proprietary plug-ins <video width="360" height="270" controls="controls" poster="image.png"> such as Flash. Plug- <source src="video.mp4" type="video/mp4" /> ins were necessary <source src="video.webm" type="video/webm" /> for videos to appear <source src="video.ogg" type="video/ogg" /> and play on a Web Your browser does not support the HTML5 video element. page. The fact that HTML5 allows video </video> and audio to be inserted without Table 7-1 lists the elements and attributes used in the example code. plug-ins is an important step for the Internet's evolution and the population's migration to mobile devices. © 2014 Certification Partners, LLC — All Rights Reserved. Version 2.1 7-4 Site Development Associate Table 7-1: Video elements and attributes Element or attribute Description <video> element Defines a video to embed in the Web page. width and height Specifies the width and height (in pixels) of the video window. If not attributes specified, the video size will be determined by the source video file when it loads, which could change the Web page layout considerably. controls attribute Adds video controls such as the play, pause, rewind and volume controls. These video controls are native to HTML5. poster attribute Identifies an image to be displayed until the play button is clicked or while the video is downloading. If the poster attribute is not specified, the first frame of the video is displayed instead. <source> element Defines the media resource. Multiple sources can be listed, such as different types of video formats, to support a variety of devices and browsers. src attribute Identifies the location and file name of the media resource. type attribute Identifies the format, or MIME type, of the video. The <video> element supports three formats: MP4, WebM and Ogg. Text Text enclosed by the <video> element will appear if the browser or device cannot support any of the video formats available. The MP4 video format (MPEG 4 files) is widely used. YouTube recently reformatted most videos away from Flash, which required a plug-in, to MP4. MP4 often uses the H.264 video codec, which is native to most browsers that support HTML5. This codec uses far less processor and battery power because it does not require a plug-in. The WebM and Ogg video formats are also used. The WebM video format often uses the VP8 codec. VP8 is an open video compression format owned by Google. Ogg uses the Theora format for HTML5 video, which is a free video compression format that can be distributed without licensing fees. To ensure all browsers and devices can access your video, you should format your video to these three formats and identify them in the <source> element. If that is not possible, then choose one, such as the MP4 format, as the default format. In the following lab, you will create a video. Suppose your supervisor has decided that a page on the company Web site should be more accessible to visual and auditory learners. She asks you to post a video on the page that shows you talking about the contents of the Web page. You will need to create a video of yourself reading some of the Web page's content. OBJECTIVE 2.10.5: Creating Lab 7-1: Creating a video videos In this lab, you will create a video of yourself talking about the Habitat for Humanity NOTE: Ensure that you Summer Youth Blitz. have Windows Movie Maker Note: This lab assumes your computer has a built-in Webcam and microphone. If it does installed on your computer. If you do not, modify the lab to select your external devices. not, download and install Windows 1. Create a new folder named Lab_7-1 on your Desktop. Essentials from the Web. 2. Open Windows Movie Maker by selecting Start | All Programs | Windows Movie Maker. © 2014 Certification Partners, LLC — All Rights Reserved. Version 2.1 Lesson 7: Video, Audio and Image Techniques 7-5 3. Movie Maker: Click the Webcam video button on the toolbar. 4. Webcam video: If prompted, select your video and microphone devices. The Webcam tab will open. 5. Webcam tab: Center yourself in the Webcam screen. Remember to convey a professional appearance. Click the Record button and read aloud the following text while you record yourself: The Summer Youth Blitz is a unique service experience for a diverse group of youth, ages 16 to 18, from high schools and youth organizations around the United States. During this program, 15 to 20 youth participants and adult leaders "blitz build" an entire Habitat house in two weeks. Apply now! 6. Click the Stop button. Save the video as webcam.wmv in your Desktop folder Lab_7-1\. Tech Note: Movie Maker only saves files and exports them as .wmv files (Windows Media Video), which is a Microsoft proprietary video format. In the next lab, you will convert the .wmv file to an HTML5-supported .mp4 file. 7. Movie Maker: Review your video and re-record it if necessary. Only keep one "take" of your video. Delete all the others. 8. Trim the beginning and end of the video by selecting the Edit tab and clicking the Trim tool button. Determine the Set start point and the Set end point to remove any unwanted footage at the beginning and ending of your video. Click Save trim. NOTE: You are welcome to 9. Optional: Add a fade-in and fade-out effect to the video by selecting the Visual experiment with Effects tab. Click the down arrow to the right of the effects. Select Multiple Effects. additional Movie Maker tools, such as In the Add or Remove Effects window, select Fade in from black and Fade out to visual effects and black and Add them, as shown in Figure 7-1. Click Apply. animations. Figure 7-1: Adding fade-in and fade-out effects in Movie Maker 10. Optional: Add the text "The Summer Youth Blitz" to the beginning of the video and "Apply Now" to the end. Do not spend more than 10 minutes creating the video — it does not need to be perfect. Figure 7-2 shows a sample video. © 2014 Certification Partners, LLC — All Rights Reserved. Version 2.1 7-6 Site Development Associate Figure 7-2: Sample video in Movie Maker 11. Movie Maker: Save your project as My Movie.wlmp to the Lab_7-1\ folder on your Desktop.