ptg Embedding Video the Simple Way There’s a lot to be learned about embedding video: tags for embedding video in web pages, new audio and video elements in HTML5, and browser incompatibilities. First, however, it’s worth discussing the way the vast majority of videos are embedded in web pages these days. People upload their video to a website that specializes in video hosting or use videos that other people have uploaded and then copy and paste the code those sites provide for embedding the videos in their own sites. The two most popular video hosting sites, YouTube and Vimeo, provide the code to embed the videos they host on the web pages for each video. You can see the form that allows you to generate the embed code for YouTube in Figure 12.1. 356 LESSON 12:Integrating Multimedia: Sound, Video, and More FIGURE 12.1 The embed form on YouTube. If you want to add a video hosted on YouTube, you just click the Embed button and the form shown in the figure displays. Choose your customization options, and then copy the HTML code from the box into your own page. The result is shown in Figure 12.2. YouTube (and other sites) automatically generate the markup that you can paste into your own web pages to embed their videos. There’s nothing magic about it; I’ll describe the tags they use when I discuss embedding video later. Download from www.wowebook.com ptg Advantages and Disadvantages of Hosting Videos on YouTube You can upload your own videos to YouTube and embed them in your pages, too. Other sites, like Vimeo (http://vimeo.com/) also offer free hosting for video. There are a num- ber of advantages to hosting your videos on YouTube. For one thing, video files tend to be rather large, and hosting them on YouTube means that you don’t have to figure out a place to put them. You also get to take advantage of YouTube’s video player, which sup- ports multiple quality levels and full-screen playback. It’s used by millions of people and is widely tested. There’s are also YouTube applications for mobile platforms like Apple iOS and Google Android, so YouTube videos can be viewed on them, whereas they can- not be with other Flash players. As you’ll see, another advantage is that it’s easy to start with YouTube. You just upload your video file, go to the new page for the video, and then copy the embed code and paste it on your own site to get things working. Another advantage of hosting your video on YouTube is that you can take advantage of YouTube’s audience in addition to the audience at your own website. When you upload a video to YouTube and make it public, it shows up in search results and on the lists of related videos when people watch other videos on the site. So in the end, using YouTube for video hosting can lead more people to your website than hosting videos on your own. The disadvantages of using YouTube are that you cede some control over your video and how it is presented. The YouTube player works well, but it’s obvious to your users that it’s the YouTube player. You may want to host the video yourself if you don’t want them to be distracted by YouTube, or if you want to use your own player. Embedding Video the Simple Way 357 12 FIGURE 12.2 A YouTube video embedded in a web page. Download from www.wowebook.com ptg Uploading Videos to YouTube YouTube provides a number of ways to upload video to the site. You can take video with your webcam and upload it directly, or even send video taken on a smart phone to YouTube. In this case, I’m going to upload an existing video file using the web interface. To start the process, go to http://upload.youtube.com/my_videos_uploada and click the Upload Video button. When you do so, a file selection box will appear that you can use to locate and select the video file you want to upload. 358 LESSON 12:Integrating Multimedia: Sound, Video, and More YouTube supports a wide variety of video formats, including those used by most camcorders. Supported formats include MP4, MOV, AVI, MWV, and FLV. After you’ve selected a file, you’ll immediately be taken to the file upload page, shown in Figure 12.3. The page shows a progress indicator that lets you know how long your video is going to take to upload and enables you to enter information about the video you’ve uploaded. Using the form you can enter a title, description, category, and tags for your video, all of which are important if you want YouTube users to find your video. NOTE FIGURE 12.3 The YouTube file upload page. Download from www.wowebook.com ptg As you can see from the screenshot, you can also choose a privacy setting for your video. You can choose public, which allows people to find your video through YouTube, or pri- vate, meaning that you can specify exactly who’s allowed to see it. The third option is unlisted. This option makes the video publicly available, but only to people who know the URL. It’s useful if you want to embed the video on your own website, but you don’t want people to find it by browsing YouTube. YouTube provides the URL and embed code for your video before it’s even finished uploading, so you can link to it immediately. Customizing the Video Player After you’ve uploaded your video, you can embed it in your own web pages. Embedding videos of your own is just like embedding other videos found on YouTube, you can just click the Embed button and copy the code for your own page. However, you can do some things to customize the embedded player. You can see all the embedding options in Figure 12.4. Embedding Video the Simple Way 359 12 FIGURE 12.4 Customization options for embed- ded YouTube videos. As you tweak the embed settings, the page automatically updates the embed code with your new settings. There are three check boxes you can select. The first allows you to disable the list of related videos that YouTube normally displays when a video finishes playing. You may want to disable these if you want your visitors to stick around on your site after watching your video instead of wandering off to look at other videos on YouTube. Enabling Show Border adds a border to the YouTube player (and adjusts the height and width to accommodate the border without shrinking the video). Privacy- enhanced mode prevents YouTube from storing identifying information about the user if they don’t click the player. Download from www.wowebook.com ptg The remaining options enable you to alter the appearance of the video player. You can adjust the color scheme and the height and width of the video from this page. After you’ve chosen all of your customization options, you can copy the embed code and use it in your page. Later in this lesson, you’ll learn about what these customization options change in the underlying markup. Other Services YouTube is the most popular video hosting service, but there are many others, too. Vimeo (http://vimeo.com/) is a popular video hosting service that’s a lot like YouTube. YouTube offers unlimited uploads but limits the length of video uploads to 10 minutes. Vimeo offers a professional (paid) account that enables subscribers to upload videos of any length. Many people also think that Vimeo’s video player, shown in Figure 12.5, is more attractive than YouTube’s because the controls disappear entirely when you’re watching the video. 360 LESSON 12:Integrating Multimedia: Sound, Video, and More FIGURE 12.5 Vimeo’s video player. The process of uploading video files to Vimeo is nearly identical to the process for YouTube. You just choose your file and information like the name and description. Both sites will convert video from nearly any common format to the format used by their player. Download from www.wowebook.com ptg Here’s a list of some other popular video hosting services: n blip.tv—http://blip.tv/ n Dailymotion—http://www.dailymotion.com/ n Flickr—http://flickr.com/ n SmugMug—http://www.smugmug.com/ n Viddler—http://www.viddler.com/ n VideoPress—http://videopress.com/ Which video hosting site you choose is a matter of taste and ease of use. Each site has its own video player and its own community, and you should choose whichever suits you best. Be sure to check out the restrictions on video length and video resolution when choosing. For example, the maximum length of videos on Flickr is 90 seconds, and only users with Pro accounts are allowed to view them in high definition (HD). There’s also no rule that says that you can’t upload your videos to more than one site. You may want to upload your videos to Vimeo for the purpose of embedding them on your own site and upload them to YouTube to make them available to YouTube’s audience. Hosting Your Own Video For any number of reasons, you might want to host video yourself instead of relying on a third-party service such as Vimeo or YouTube to host it for you. For one thing, you can use your own player rather than using the one they provide. You also may not want to include branding or advertising from a third party on your own site, and you might not want to distract your users with a link to YouTube. As is the case with most third-party services on the Web, hosting your own video gives you more control over the end result but requires more work and expertise on your part. At one time, a wide variety of methods were used to embed video in web pages, each with its own browser plug-in and file format. These days, just two common methods are in use. The first is to use a Flash movie to play back the video, and the second is to use the HTML5 <video> tag to play the video using the browser itself. I’ll explain how to use both approaches, and how to combine the two to support as many browsers and plat- forms as possible. Before diving into the tags used to publish video on the Web, it’s important to first explain how to create video files that can be played in a browser. Understanding how to create video files for the Web is the first step in getting video from your camcorder or mobile phone onto web pages. Hosting Your Own Video 361 12 Download from www.wowebook.com ptg Video and Container Formats Before discussing how to embed video within a web page, it’s important to discuss video formats. All video files are compressed using what’s known as a codec, short for coder/decoder. After a video has been encoded, it must be saved within a container file, and just as there are a number of codecs, there are a number of container file formats, too. To play a video, an application must understand how to deal with its container file and decode whatever codec was used to compress the video. For example, H.264 is one of the most popular video codecs and is supported by a number of container formats, including FLV (Flash Video) and MP4. It’s not uncommon to run into situations where a video player can open the container file used to package the video but does not support the codec used to encode the video. Likewise, if a video player doesn’t recognize the container file used to package the video, it won’t play it back, regardless of the codec used. Whereas many, many video codes and container formats exist, only a few are relevant in terms of video on the Web. The extension for a video file indicates its container format, not the codec of the video in it. For example, the extension for Apple’s QuickTime container format is .mov, regard- less of which codec is used to encode the video. H.264 is a commercial format that is supported natively by Microsoft Internet Explorer 9, Apple Safari, and Google Chrome. It’s also supported by Flash. The problem with H.264 is that it is patented, and there are license fees associated with the patents. Companies that implement the codec must pay for a license as must companies that use the codec to deliver H.264 video to users. Mozilla has decided not to support H.264 in Firefox because of the patent licenses required. H.264 is the most popular format for delivering video content over the Web by far. It’s also used for satellite and cable television and to encode the video on Blu-ray discs. Most commonly, H.264 video is associated with MP4 (.mp4) containers or occasionally Flash Video (.flv) containers. MP4 files are supported by the Flash player and by all the browsers that support H.264 video, making it the most widely supported container for distributing video on the Web. Theora is an open, freely licensed video codec released by the Xiph.org Foundation. Mozilla Firefox and Google Chrome offer Theora support, but Apple and Microsoft have no plans to support it. It’s usually associated with the Ogg container format, and the files are usually referred to as Ogg Theora files. Ogg files that contain video usually have the extension .ogv. There’s also an associated audio codec, Vorbis. Ogg Theora files have the extension .oga. 362 LESSON 12:Integrating Multimedia: Sound, Video, and More Download from www.wowebook.com ptg In 2010, Google released a new container format called WebM. WebM files use the VP8 codec for video and the Vorbis codec for audio. VP8 was originally created by a com- pany called On2, which was acquired by Google, who then released the codec to the public without any licensing requirements. WebM is supported by Google Chrome and will also be supported by Mozilla Firefox, Microsoft Internet Explorer, and Adobe Flash. Currently, if you want to encode your video only once, you can use H.264/MP4 and play it natively in browsers that support it using the <video> tag. Other browsers can play the same video file using a Flash video player. If you want to avoid using a Flash-based player, the safest bet is to encode your video using Ogg Theora, as well, so that it will play in Firefox. Converting Video to H.264 One of the nicest features of video hosting services is that they free you from worrying about codecs and container formats, because they do the conversion for you. It’s up to you to create a video file with the desired resolution, but they take it from there. If you’re hosting video yourself, you’ll need to convert your video to MP4 and perhaps Ogg Theora, too. A number of tools are available for dealing with video, but when it comes to converting video from other formats to H.264, there’s only one you need to worry about: Handbrake. Handbrake is a free, open source application that enables you to convert video stored in pretty much any format to H.264. There are versions for Windows, OS X, and Linux that all work basically the same. You can download the Handbrake at http://handbrake.fr/. If you just want to convert your video to H.264, you can open it in HandBrake and click Start. However, you’ll probably want to tweak some of the settings to optimize your video for use on the Web. Check out the interface for HandBrake in Figure 12.6. I’ll walk you through the options you’ll want to set to optimize your video for the Web. First, choose a filename for your video using the Destination field. You’ll also want to stick with the default output format, MP4. The four tabs at the bottom enable you to optimize the video output for your purpose. First, though, check the Web Optimized but- ton for your video. It enables your video to start playing immediately as it’s being down- loaded and makes it easier for players to skip around in the video. The only cost is slightly longer encoding time. Converting Video to H.264 363 12 Download from www.wowebook.com ptg Under the video options, the default codec is H.264. Keep that. Under Framerate, the default is to stick with the framerate in the video you’re converting, but you can choose another option. The higher the framerate, the larger the resulting file. If you change the framerate, you can enable two-pass encoding, which causes encoding to take longer (by adding the additional pass), but results in higher-quality video for a given file size. Finally, you’ll tweak the Quality settings. Video encoding is all about trade-offs. The higher the picture quality, the larger the resulting file. Larger files take up more space on the server and take longer to download. On the other hand, they look better. There are three variables you can change that affect the overall size of the file—the height and width of the video (a 320x240 video will be much smaller than a 640x480 video), the framerate, and the quality. If your video will be played in a small box embedded on a web page, you can afford to lower these settings to create smaller videos. If your video will be played on a 42-inch television, you’ll probably want to raise the quality settings. There are three ways to specify the quality for your video, and understanding them requires that you know about bit rate. The bit rate of a video is the amount of data used by one second of video. The bigger the number, the more space the video will use. The default method of specifying quality is “constant quality.” What this means is that the entire video will be compressed by the same factor. H.264 is like the JPEG image for- mat, in that some data is lost when the video is compressed. The Constant Quality setting 364 LESSON 12:Integrating Multimedia: Sound, Video, and More FIGURE 12.6 The interface for HandBrake. Download from www.wowebook.com ptg applies the same compression factor to the whole video. When you set a video to Constant Quality, the video uses whatever bit rate is required to provide that quality, so the bit rate will vary throughout depending on how well the video can be compressed at the specified quality level. The Average Bit Rate option varies the quality of the video to satisfy the bit rate that you specify. Both it and the target file size option are more predictable—the video will be the size you expect when you get to the end. Instead of manipulating the settings on your own, you can use one of the presets that HandBrake provides. To view the presets, click the Toggle Presets button on the upper right. The list of settings in Figure 12.7 will appear. (I’ve fully expanded the list.) These presets are already optimized for certain uses. The one that works best for web video is the iPhone & iPod Touch preset. The simplest approach, if you’re starting out, is to select it and then click the Web Optimized check box. Converting Video to H.264 365 12 FIGURE 12.7 The list of HandBrake presets. You’ll also want to click the Picture Settings button in the toolbar to specify the height and width of your video. 320x240 is a pretty standard size for smaller videos. 640x480 is also a common setting. For HD video, set the size to at least 1280x720. From Picture Settings, you can also crop your video or adjust the filter settings. The HandBrake docu- mentation has more on the filter settings. Download from www.wowebook.com . that allows you to generate the embed code for YouTube in Figure 12 .1. 356 LESSON 12 :Integrating Multimedia: Sound, Video, and More FIGURE 12 .1 The embed form on YouTube. If you want to add a video hosted. player. You can see all the embedding options in Figure 12 .4. Embedding Video the Simple Way 359 12 FIGURE 12 .4 Customization options for embed- ded YouTube videos. As you tweak the embed settings,. branding or advertising from a third party on your own site, and you might not want to distract your users with a link to YouTube. As is the case with most third-party services on the Web, hosting