ptg After you’ve specified the settings, just click the Start button to encode your video as H.264. When the encoding is complete, preview the video, preferably in the player you’ll be using on the Web, to make sure that the quality is sufficient. If it’s not, encode the video again using different settings. Likewise, if the video file is larger than you’d like, you may want to encode the video again with the compression turned up. Afterward, watch the video and make sure that it still looks okay. Converting Video to Ogg Theora To convert video for use with Firefox and Chrome, you’ll need to convert it to Ogg Theora. A number of tools can be used to do so. One popular, free option is Firefogg, which can be found at http://firefogg.org/. Firefogg is an add-on for the Firefox web browser. When it’s installed, you can go back to the Firefogg website to convert video from other formats to Ogg Theora. VLC, a video player that supports a wide variety of formats, can also be used to convert video to Ogg Theora. It’s available for Windows, OS X, and Linux. You can download it at http://www.videolan.org/vlc/. To use it to convert video from one format to another, use the Open Capture Device option in the File menu, select the file you want to convert, and then use the Transcoding Options to choose the Theo video format and Vorb audio format. Embedding Video Using <video> The methods used to embed video in web pages have changed a great deal over the years. In the early days of the Web, to present video, the best approach was just to link to video files so that users could download them and play them in an application other than their browser. When browsers added support for plug-ins through the <embed> tag, it became possible to embed videos directly within web pages. The catch was that to play the video, the user was required to have the proper plug-in installed. The tag used to embed plug-ins in pages changed from <embed> to <object>, but the approach was the same. Plug-ins made embedding videos possible, but they didn’t make it easy, because of the wide variety of video formats and plug-ins available. Publishing video files that worked for all, or even most, users was still a problem. In 2002, Adobe added support for video to Flash. Because nearly everyone had Flash installed, embedding videos in Flash movies became the easiest path to embedding video in web pages. Later, it became possible to point a generic Flash video player at a prop- erly encoded movie and play it. This is how sites like YouTube work. As you’ll see later in this lesson, there are some Flash video players that you can use to play videos that you 366 LESSON 12:Integrating Multimedia: Sound, Video, and More Download from www.wowebook.com ptg host, too. Currently, Flash remains the most popular approach for presenting video on the web, but with HTML5, browsers are beginning to add native support for video playback through the <video> tag. The current generation of mobile devices that are capable of video playback (like the iPhone and phones based on Google’s Android operating system) support the HTML5 <video> tag and in most cases do not support Flash. So, the best approach for providing video to the widest number of users is to use both the <video> tag and a Flash player. After introducing the <video> tag, I’ll explain how to use it with a Flash movie in such a way that users only see one video player—the appropriate one for their environment. The <video> Tag The <video> tag is new in HTML5. It is used to embed a video within a web page, and to use the browser’s native video playback capabilities to do it, as opposed to Flash or some other plug-in. Here’s a simple version of the <video> tag: <video src=”myvideo.mp4”> If the browser is capable of playing the video at the URL specified in the src attribute, it will do so. Or it would, if there were some way of telling the browser to play the video. In this case, the video will have no controls and won’t start playing automatically. To take care of that, I need to use some of the attributes of the <video> tag, which are listed in Table 12.1. TABLE 12.1 <video> Attributes Attribute Description src The URL for the video to be played. height The height of the element. width The width of the element. controls Boolean attribute that indicates that the browser should supply its own controls for the video. The default is to leave out the controls. autoplay Boolean attribute that indicates that the video should play imme- diately when the page loads. loop Boolean attribute. If present, the video will loop when it reaches the end, replaying until the user manually stops the video from playing. preload Boolean attribute. If present, the browser will begin downloading the video as soon as the page loads to get it ready to play. Ignored if autoplay is present. Embedding Video Using <video> 367 12 Download from www.wowebook.com ptg Because the video above doesn’t have the controls or autoplay attributes, there’s no way to get it to play. Figure 12.8 shows the video, embedded using the following tag, with controls included: <video src=”myvideo.mp4” controls> 368 LESSON 12:Integrating Multimedia: Sound, Video, and More FIGURE 12.8 A video embedded using the <video> tag, with controls. When embedding a video, make sure that you give users some way to control the video playback. Be conservative with autoplay and loop, too. Many users don’t want a video to start playing immediately when they get to a page. If you include the loop attribute and you don’t include any controls, the user will have to leave the page to stop the video. By default, the <video> element will be the same size as the video in the video file. You can change the size of the element on the page using the height and width attributes; however, the browser will preserve the aspect ratio of the video file and leave blank space where needed. For example, my movie was created using a 3:2 aspect ratio. If I create a <video> element with a 9:5 aspect ratio, the movie will appear centered within the element, as shown in Figure 12.9: <video style=”background: black” src=”http://www.yo-yo.org/mp4/yu.mp4” controls width=”675” height=”375”> CAUTION Download from www.wowebook.com ptg I set the background color of the <video> element to black to make it clear where the browser puts the extra space when the movie’s aspect ratio does not match the aspect ratio of the element. Finally, if you’re fairly certain that most people who come to your page will want to view the video, but you want to let them play the video themselves, you may want to include the preload attribute, which tells the browser to go ahead and download the video when the page loads but to wait for the user to play the video. Usually this means users will not have to wait as long to see the video after they try to play it, but the disad- vantage is that you’ll use bandwidth sending the video to everyone, whether they actually play the movie. Using the <source> Element There are two major drawbacks to using the <video> tag. The first is that all browser support is limited. Versions 8 and earlier of Internet Explorer do not offer support for <video>, nor does Firefox 3.0. The second is that even among browsers that support the <video> tag, not all of them support the same video containers or codecs. As you’ve seen, this problem requires you to encode your videos in multiple formats if you want to reach most browsers, but the good news is that the <video> element provides a means of dealing with this issue so that your users won’t notice. To embed a single video file, you can use the src attribute of the video tag. To provide videos in multiple formats, use the <source> element nested within your <video> tag. Here’s an example, the results of which are shown in Figure 12.10: <video width=”320” height=”240” preload controls> <source src=”movie.mp4” type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’> Embedding Video Using <video> 369 12 FIGURE 12.9 A <video> tag with a different aspect ratio than the embedded video file. Download from www.wowebook.com ptg <source src=”movie.ogv” type=’video/ogg; codecs=”theora, vorbis”’> </video> 370 LESSON 12:Integrating Multimedia: Sound, Video, and More FIGURE 12.10 A video embedded using the <video> tag with <source> tags with controls. As you can see, in this case I’ve left the src attribute out of my <video> tag. Instead, I’ve nested two <source> elements within the tag instead. The src attribute of <source> contains the URL a video file, and the type attribute provides information to the browser about the format of that file. The browser examines the types of each of the movie files and chooses one that is compatible. The syntax of the type attribute can be a little bit confusing because of the punctuation. Here’s the value: video/ogg; codecs=”theora, vorbis” The first part is the MIME type of the video container. The second part lists the codes that were used to encode the audio and video portions of the file. So in this case, the con- tainer type is video/ogg, the video codec is theora, and the audio codec is vorbis. If the browser supports both the file type and the codecs, it will use that video file. The val- ues for the type attribute are as follows: n MP4/H.264—video/mp4; codecs=”avc1.42E01E, mp4a.40.2” n Ogg Theora—theora, vorbis n WebM—vp8, vorbis Embedding Flash Using the <object> Tag The <object> tag is used to embed media of all kinds in web pages. Although it is most often used to embed Flash movies, it can also be used for audio files, video files, images, and other media types that require special players. Unlike all the other HTML tags you’ve learned about so far, the <object> tag works differently from browser to browser. Download from www.wowebook.com ptg The problem is that browsers use different methods to determine which plug-in should be used to display the media linked to through the <object> tag. First, the version of the <object> tag that works with Internet Explorer: <object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” width=”780” height=”420”> <param name=”movie” value=”movie.swf” /> </object> The height and width attributes are necessary to define how much space the <object> will take up. The classid attribute identifies the ActiveX control that will be used to dis- play the content in the browser. That long, random-looking collection of letters and num- bers is the address of the ActiveX control in the Windows Registry. Your best bet is to find an example of Flash embedding and copy it from there. Embedding Flash Using the <object> Tag 371 12 When you’re specifying the height and width for a Flash movie, be sure to take the size of the player into account, too. Some players include a border, and nearly all of them provide controls for the video playback. You need to account for these parts of the window to make sure your video is shown at the resolution you anticipated. The <param> element is used with <object> to provide additional information about the content being embedded to the plug-in referenced by the <object> tag. The <param> ele- ment has two attributes, name and value. This <param> element provides the Flash player with the URL of the movie to be played. The preceding markup will work in Internet Explorer, embedding the Flash movie named movie.swf. Here’s the markup for the <object> tag for other browsers: <object type=”application/x-shockwave-flash” data=”myContent.swf” width=”780” height=”420”> </object> For non-Internet Explorer browsers, you specify the plug-in to use with the type attribute and the URL of the movie to play with the data attribute. As you can see, the height and width attributes are included here, too. The type attribute is used to provide an Internet media type (or content type). The browser knows which content types map to which plug-ins, so it can figure out whether you have the proper plug-in installed. If you do, it can load it and render the content at the URL specified by the data attribute. In the sidebar, I explain exactly what Internet media types are. TIP Download from www.wowebook.com ptg 372 LESSON 12:Integrating Multimedia: Sound, Video, and More Internet Content Types Internet media types, also referred to as content types or MIME types, are used to describe the format of a file or resource. They’re a more robust version of a file extension. For example, a PNG image usually has the extension .png. The MIME type for PNG files is image/png. Microsoft Word documents have the extension .doc (or more recently, .docx) and the MIME type application/msword. These types were originally used to identify the types of email attachments—MIME is short for Multipurpose Internet Mail Extensions—but these days, they’re used in other cases where information about file types needs to be exchanged. In the case of the <object> tag, you specify an Internet media type so that the browser can determine the best way to render the content referenced by that tag. The Internet media type for Flash is application/x-shockwave-flash, if that type is specified, the browser knows to use the Flash plug-in. There’s one other important use for these types when it comes to video and sound files. When a web server sends a resource to the Web, it includes a content type. The browser looks at the content type to determine what to do with the resource. For example, if the content type is text/html, it treats it as a web page. When a web server sends files to users, it figures out the Internet media type using the file extension. So if a user requests index.html, the web server knows that an extension of .html indicates that the files should have the content type text/html. Later in this lesson, I discuss how to make sure that your web server sends the right content types for video and audio files that you use. With most tags, you could just combine all the attributes and wind up with an <object> that works with all the popular browsers. With <object>, it doesn’t work that way. However, there’s a way around this problem. Here’s a version that will work: <object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” width=”780” height=”420”> <param name=”movie” value=”movie.swf” /> <object type=”application/x-shockwave-flash” data=”myContent.swf” width=”780” height=”420”> </object> </object> In this example, one of the <object> tags is nested inside the other. This works because browsers ignore tags they don’t understand, so browsers that aren’t Internet Explorer ignore the outer <object> tag. Internet Explorer ignores tags nested inside an <object> tag, except for the <param> tag, so it ignores the inner <object>. That’s the simplest approach to using the <object> tag in a way that works with all browsers. Download from www.wowebook.com ptg A number of other attributes are supported by the <object> tag, too (see Table 12.2). TABLE 12.2 <object> Attributes Attribute Description align Aligns the element to the left, right, top, or bottom. This attribute is superseded by the Cascading Style Sheets (CSS) align property and is removed from HTML5. archive A list of URLs for resources that will be loaded by the browser. Removed from HTML5 because it was rarely used. border The size of the border in pixels. Removed from HTML5 because it is superseded by the CSS border property. classid Specifies the class ID value of the plug-in to be used. This is a reference to the plug-in’s address in the Windows Registry. Removed from HTML5. codebase The URL where the plug-in can be downloaded if the user does not have it installed. Only works with Internet Explorer. Removed from HTML5. codetype The MIME type of the code (plug-in) referenced by the codebase attribute. This isn’t the type of the media, but rather of the plug- in used to play the media. Removed from HTML5 and rarely used. data The URL for the data that will be presented in the <object> ele- ment. Flash uses a <param> to specify this instead. declare Indicates that the object is only a declaration and should not be created or displayed. Rarely used and removed from HTML5. form New attribute in HTML5 that enables the element to be associ- ated with a specific form. height The height of the element. hspace The horizontal padding around the object. Superseded by the padding CSS property and removed from HTML5. name A unique name for the element. standby Contains text to be displayed while the object is loading. Removed from HTML5, in favor of using CSS and JavaScript to display a progress message. type The MIME type of the content to be displayed in the object. usemap Specifies the URL of a client-side image map to be applied to the object. vspace The vertical padding for the object. Superseded by the padding CSS property and removed from HTML5. width The width of the element. Embedding Flash Using the <object> Tag 373 12 Download from www.wowebook.com ptg In HTML5, you may find yourself using the <video> tag rather than the <object> tag for video files, but the <object> tag will still be used for other Flash movies, and for other multimedia content, such as Microsoft Silverlight. Alternative Content for the <object> Tag What happens when a user hasn’t installed the plug-in that the <object> tag requires? The browser will either display an error message or just display nothing at all. However, you can provide alternative content that will be displayed if the browser cannot find the correct plug-in. All you have to do is include the alternative content inside the <object> tag. If the <object> tag works, it will be ignored. If it doesn’t, it will be displayed. Here are the nested <object> tags with some alternative content included. You can see alterna- tive content displayed in a browser that does not have Flash installed in Figure 12.11. Here’s the code: <object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” width=”780” height=”420”> <param name=”movie” value=”movie.swf” /> <object type=”application/x-shockwave-flash” data=”myContent.swf” width=”780” height=”420”> <p>You need the Flash player to view this page. <a href=”http://get.adobe.com/flashplayer/>Get Flash.</a></p> </object> </object> 374 LESSON 12:Integrating Multimedia: Sound, Video, and More FIGURE 12.11 Alternative content displayed in a browser that doesn’t support Flash. It’s often a good idea to make your alternative content the same size as the <object> tag to preserve the layout of your page. You can style your alternative content with CSS or use an image of the same size as a placeholder for the <object>. TIP Download from www.wowebook.com ptg The <embed> Tag The <embed> element has been added to HTML5, mainly as a recognition that it has been in wide use since Netscape created it when it added plug-in support to their browser. Browsers continue to support it, mainly because many pages out there still use it. The default YouTube embed code includes the <embed> tag. First, let’s look at the required attributes of the <embed> element: <embed src=“a01607av.avi” height=“120” width=“160” type=”application/x-shockwave-flash” /> The src attribute contains the location of the multimedia file you want to embed in the web page. The type attribute contains the content type. (It’s the same as the type attribute of the <object> tag.) The height and width attributes specify the dimensions of the embedded file in pixels. Table 12.3 summarizes the <embed> attributes supported by Internet Explorer. TABLE 12.3 <embed> Attributes Attribute Description allowfullscreen Specifies whether the embedded element can occupy the full screen. Values are true or false. allowscriptaccess Determines whether the embedded object can communicate with external scripts or link to external pages. Values are always, samedomain, and never. flashvars Used to pass configuration parameters to the Flash player. Only used if the embedded object is Flash. height The height of the element. plug-inspage The URL of the page where you can download the plug-in used to view this object. src The URL of the multimedia file. type The MIME type of the multimedia file indicated by the src attribute. width The width of the element. Finally, you can include the noembed element to provide support for visitors who do not have a web browser that can display plug-ins: <noembed>This Web page requires a browser that can display objects.</noembed> <embed src=“a01607av.avi” height=“120” width=“160” /> The <embed> Tag 375 12 Download from www.wowebook.com . can see alterna- tive content displayed in a browser that does not have Flash installed in Figure 12 .11 . Here’s the code: <object classid=”clsid:D27CDB6E-AE6D -1 1 cf-96B 8-4 44553 5400 00” width=”780” height=”420”> <param. classid=”clsid:D27CDB6E-AE6D -1 1 cf-96B 8-4 44553 5400 00” width=”780” height=”420”> <param name=”movie” value=”movie.swf” /> <object type=”application/x-shockwave-flash” data=”myContent.swf”. Figure 12 .10 : <video width=”320” height=” 240 preload controls> <source src=”movie.mp4” type=’video/mp4; codecs=”avc1.42E01E, mp4a .40. 2”’> Embedding Video Using <video> 369 12 FIGURE