ptg The bottom line on <embed> is that you shouldn’t use it. I’ve included it here because you’ll probably see it on other sites, but there are better ways to embed media into a web page. Embedding Flash Movies Using SWFObject SWFObject is a combination of markup and JavaScript that provides a way to embed Flash movies in web pages using standards-compliant markup that still supports all the browsers that are currently in use. JavaScript is a programming language that runs within the context of a web page. I explain how it works in more detail in Lesson 14, “Introducing JavaScript.” You don’t need to know how to program in JavaScript to use SWFObject; you just need to copy and paste some code and fill in a few blanks. To download SWFObject and read the documentation, go to http://code.google.com/p/swfobject/. Aside from providing a reliable way to present Flash movies using standards-compliant markup, SWFObject also works around a problem that can’t be dealt with using markup alone. When the version of the Flash player a user has installed is too old to play a movie, the movie will not be presented and any alternative content you provided will not be displayed. The browser hands off the movie to the Flash player assuming it will work and doesn’t handle things gracefully if it does not. SWFObject uses JavaScript to catch these errors and show the correct alternative content when they occur. SWFObject provides two approaches to embedding content, one uses markup augmented by a bit of JavaScript, the other uses pure JavaScript. Using markup provides better per- formance and offers some level of functionality if JavaScript is disabled or the content is republished in an environment where the JavaScript is not included. The dynamic version is a bit more flexible in that it enables you to configure the embedded player on-the-fly. Using SWFObject with markup (referred to as static publishing) requires three steps: adding the <object> tags, including the swfobject.js file in the page, and registering the player with the SWFObject library. Here’s the code: <script type=”text/javascript” src=”swfobject.js”></script> <script type=”text/javascript”> swfobject.registerObject(“myId”, “9.0.115”, “expressInstall.swf”); </script> <object id=”myId” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” width=”780” height=”420”> <param name=”movie” value=”myContent.swf” /> <object type=”application/x-shockwave-flash” data=”myContent.swf” width=”780” height=”420”> 376 LESSON 12:Integrating Multimedia: Sound, Video, and More Download from www.wowebook.com ptg <p>Alternative content</p> </object> </object> The first line loads the external JavaScript file into the page. You’ll need to make sure that the src attribute points to the correct location for your copy of swfobject.js. You’ll learn more about JavaScript and external JavaScript files in Lesson 14. The next three lines are some JavaScript code that’s embedded within the page. Here’s the line between the opening and closing <script> tag: swfobject.registerObject(object ID, required Flash version, movie URL); The italicized text represents placeholders for the values that you need to plug in to reg- ister SWFObject. As you can see, SWFObject requires the ID of the <object> tag, the version of Flash that your movie requires, and the URL of the movie to be played. The other option is to use the JavaScript-based approach. Here’s the code: <script type=”text/javascript” src=”swfobject.js”></script> <script type=”text/javascript”> swfobject.embedSWF(“myContent.swf”, “myContent”, “300”, “120”, “9.0.0”); </script> <div id=”myContent”> <p>Alternative content</p> </div> As you can see, the main difference is that the <object> tags are gone entirely. Instead, I’ve got a <div> tag that serves as the container for the Flash movie. The alternative con- tent that will be displayed if the Flash player is not present or does not satisfy the version requirement is placed within the <div>. The JavaScript call to dynamically publish Flash movies is a bit different from the one used in the static publishing method: swfobject.embedSWF(movie URL, ID of the target div, width, height, required Flash version); Many Flash movies enable configuration through a parameter named FlashVars. You can specify them using the <param> tag: <param name=”FlashVars” value=”controls=on” /> The configuration variables that are available depend entirely on the Flash movie that you’re using. You can also configure the movie through the dynamic publishing approach, but it requires a bit more knowledge of JavaScript. For more information, check out the online documentation for SWFObject after the JavaScript lessons. In the next section, I talk about some specific Flash video players, both of which can be embedded in a page using SWFObject. Embedding Flash Movies Using SWFObject 377 12 Download from www.wowebook.com ptg Flash Video Players You’ve learned how to embed video in pages with the <video> tag and how to embed Flash content in pages. Next I introduce some Flash players that can play the same videos you created for use with the <video> tag. These players are useful because they enable anyone who has Flash to view your videos. A number of such video players are available. In this section, I discuss two of them: JW Player and Flowplayer. JW Player JW Player is a popular Flash video (and audio) player. It is licensed under a Creative Commons noncommercial license, so it’s free to use so long as it’s not for a commercial purpose. It also requires you to attribute the work to its creator when you use it; in other words, you have to link back to the JW Player website when you embed the player. There’s also a commercial version available that you can use for any purpose without the link to the JW Player website. If your website includes advertising, you must use the commercial version of JW Player. To download JW Player, go to http://www.longtailvideo.com/players/jw-flv-player. After you’ve downloaded the player, you’ll need your video file as well as the Flash player itself, player.swf. JW Player includes an example file that uses the <object> and <embed> tags, but you should use a standards-complaint approach. You can use SWFObject to embed JW Player, as shown in Figure 12.12, using the following code: <script type=”text/javascript” src=”swfobject.js”></script> <script type=”text/javascript”> swfobject.registerObject(“myId”, “9”, “expressInstall.swf”); </script> <div> <object id=”myId” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” width=”400” height=”315”> <param name=”movie” value=”player.swf” /> <param name=”flashvars” value=”file=video.mp4” /> <!—[if !IE]>—> <object type=”application/x-shockwave-flash” data=”player.swf” width=”400” height=”315”> <param name=”flashvars” value=”file=video.mp4” /> <!—<![endif]—> <div> <!— Alternative content —> <p><a href=”http://www.adobe.com/go/getflashplayer”>Download Flash</a></p> </div> <!—[if !IE]>—> </object> <!—<![endif]—> </object> </div> 378 LESSON 12:Integrating Multimedia: Sound, Video, and More Download from www.wowebook.com ptg The code starts with the <script> tags used to include the SWFObject script and register the player. If you look at the line that registers the player, you’ll see that I’m registering the <object> tag with the ID myId and that I’m specifying that version 9 of Flash is required, because that’s the first version of Flash that supported MP4 and H.264. Finally, there’s a reference to expressInstall.swf, a Flash movie that’s included with SWFObject that enables users to upgrade their Flash player in place if it’s out-of-date. Both the <object> tag for Internet Explorer and the nested <object> tag for other browsers refer to the JW Player Flash file, player.swf. They also both use the flash- vars param to point to the video file, video.mp4. I’ve also included some alternative content that points the users to the Flash download site if they don’t have Flash installed. JW Player is highly customizable. A wizard on the JW Player website enables you to generate your own customized embed code at http://www.longtailvideo.com/support/ jw-player-setup-wizard. The code it produces uses the dynamic publishing feature from an old version of SWFObject. You can see what the wizard looks like in Figure 12.13. There’s a detailed list of the configuration parameters in the documentation at the JW Player website. All the configuration options are specified in the flashvars parameter. Here’s an example that moves the control bar to the top of the player: <param name=”flashvars” value=”file=video.flv&controlbar=top” /> Flash Video Players 379 12 FIGURE 12.12 A video played using JW Player. Download from www.wowebook.com ptg There are two configuration parameters in that <param> tag, file and controlbar. Each is separated from its value by an equals sign, and the two parameters are separated by an encoded ampersand. The flashvars is formatted in the same way as a URL query string, the same format used for encoding form parameters when they’re sent to the server. For more information about how to format query strings, take a look at the Wikipedia article at http://en.wikipedia.org/wiki/Query_string. Using Flowplayer Flowplayer is another popular Flash-based video player. The base version is free and open source and can be used on commercial sites. The only catch is that the base version displays the Flowplayer logo at the end of the video. If you want to get rid of the brand- ing or display your own logo, you can purchase a commercial version of Flowplayer. The price is based on the number of domains on which you want to use the player. You can download it at http://flowplayer.org/. Flowplayer is used similarly to dynamic publishing with SWFObject. To embed a video in a page using Flowplayer, you must include the custom JavaScript file supplied with Flowplayer, using a <script> tag: <script type=”text/javascript” src=”path/to/the/flowplayer- 3.2.2.min.js”></script> Then you have to add a container to the page in which the video will appear: <a href=”myvideo.mp4” style=”display: block; width: 425px; height: 300px;” id=”player”>Download video</a> 380 LESSON 12:Integrating Multimedia: Sound, Video, and More FIGURE 12.13 JW Player with the control bar moved to the top. Download from www.wowebook.com ptg And finally, you need to install the player in the target element: <script type=”text/javascript”> flowplayer(“player”, “path/to/the/flowplayer-3.2.2.swf”); </script> Instead of using the <object> tag or using a <div> for as the container for the player, Flowplayer recommends using the <a> tag. The player will play the video referenced in the href attribute of the <a> tag. Here’s the full example page, which is shown in Figure 12.14: <!DOCTYPE html> <html> <head> <script type=”text/javascript” src=”flowplayer-3.2.2.min.js”></script> </head> <body> <a href=”http://e1h13.simplecdn.net/flowplayer/flowplayer.flv” style=”display:block; width:520px; height:330px” id=”player”></a> <script type=”text/javascript”> flowplayer(“player”, “flowplayer-3.2.2.swf”); </script> </body> </html> Flash Video Players 381 12 FIGURE 12.14 A video played using Flowplayer. There are a number of customization options for Flowplayer. The easiest way to change them is to use Flowplayer’s Setup application, available at http://flowplayer.org/setup/. You can also configure Flowplayer yourself using JavaScript. There’s a full list of config- uration options on the Flowplayer website at http://flowplayer.org/documentation/ configuration/. Download from www.wowebook.com ptg Using the <object> Tag with the <video> Tag The <object> tag can be used as an alternative for presenting video for browsers like Internet Explorer that don’t support the <video> tag. All that you need to do is included a proper <object> tag inside your <video> tag. The way HTML support works in browsers ensures that this works. Browsers ignore tags that they don’t recognize, so Internet Explorer will ignore your <video> tag. Browsers that do support the <video> tag will ignore any <object> tags that are nested within them, recognizing that they are included as an alternative means of presenting the video. So when you use them together, you wind up with markup that looks like this: <video width=”320” height=”240” controls> <source src=”path/to/movie.mp4” type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’> <source src=”path/to/movie.ogv” type=’video/ogg; codecs=”theora, vorbis”’> <object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” ? width=”320” height=”240”> <param name=”movie” value=”/movie.mp4”> ? </object> </video> The <video> tag with its <source> elements will present video in browsers that support it, and for those that don’t, the <object> element is included to present the video using Flash. You can even further nest tags, including the <object> tags used by both Internet Explorer and other browsers as children of the <video> tag: <video width=”320” height=”240” controls> <source src=”path/to/movie.mp4” type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’> <source src=”path/to/movie.ogv” type=’video/ogg; codecs=”theora, vorbis”’> <object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” ? width=”320” height=”240”> <param name=”movie” value=”/movie.mp4”> ? <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> </video> In this case, browsers that support the native <video> tag will use it. Then, Internet Explorer will use the nested <object> tag, and finally other browsers will use the inner <object> tag. 382 LESSON 12:Integrating Multimedia: Sound, Video, and More Download from www.wowebook.com ptg Embedding Audio in Your Pages The nice thing about embedding audio is that it’s similar to embedding video. HTML5 provides an <audio> tag that works almost identically to the <video> tag. The <embed> tag can also be used with audio, but you should use the <audio> and <object> tags instead. Four main file formats and codecs are used for audio on the Web: MP3, Ogg Vorbis, AAC, and WAV. MP3 is supported natively by Safari and Chrome and can be played using Flash-based players. The WAV format is supported by Firefox, Safari, and Opera. Ogg Vorbis, the open format, is supported by Firefox and Chrome. AAC is the format used by iTunes when you rip CDs. It is supported natively by Safari and also by Flash. Your best bet for reaching the largest audience is to use the <audio> tag with MP3 files for browsers that support it, including mobile browsers that support HTML5 but not Flash, and then use a Flash-based player to play the MP3 files for those users whose browsers do not support HTML5 or don’t support the MP3 format. The <audio> Tag The <audio> tag is similar to the <video> tag. It attempts to use the native capabilities of the browser to play an audio file. Its attributes are the same as those <video> tag, except that the height and width attributes are not used. Here’s an example of the <audio> tag: <audio src=”song.mp3” controls> If the browser is capable of playing the video at the URL specified in the src attribute, it will present the audio, which you can use to control playback. The audio player appears in Figure 12.15. Embedding Audio in Your Pages 383 12 FIGURE 12.15 An embedded audio player. Download from www.wowebook.com ptg Table 12.4 lists the attributes of the <audio> tag. Table 12.4 <audio> Attributes Attribute Description src The URL for the video to be played. 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 immedi- ately 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. To provide background music for the page, you can add the autoplay and loop attributes to the tag. Chances are, if you use autoplay, or even worse, autoplay and loop without also providing controls for the audio, your users will leave in a hurry. Flash Audio Players Embedding Flash audio players is exactly the same as embedding Flash video players in a page. You can use the <object> tag, nested <object> tags, or SWFObject to embed your Flash movie. You can also nest <object> tags within <audio> tags to maximize browser support. Both JW Player and Flowplayer can play audio as well as video files. To do so, supply the path to an MP3 file rather than to a video file. There are also a number of Flash play- ers that are just for audio. One popular Flash audio player is just called Audio Player. You’ll want to download the standalone version from http://wpaudioplayer.com/. It is also available as a plug-in for the WordPress blogging tool; be sure not to download that version. After you’ve downloaded it, copy the audio-player.js and player.swf files to your website. Then, set up the audio player, as shown in this example page, which appears in Figure 12.16: <!DOCTYPE html> <html> <head> <title>Audio Player</title> <script src=”audio-player.js” type=”text/javascript”></script> 384 LESSON 12:Integrating Multimedia: Sound, Video, and More Download from www.wowebook.com ptg <script type=”text/javascript”> AudioPlayer.setup(“player.swf”, { width: 325 }); </script> </head> <body> <p id=”myaudio”><a href=”song.mp3”>Download MP3 file</a></p> <script type=”text/javascript”> AudioPlayer.embed(“myaudio”, {soundFile: “song.mp3”} ); </script> </body> </html> Summary 385 12 FIGURE 12.16 An embedded audio player. Audio Player uses JavaScript to embed the player in a target element using a technique similar to the SWFObject dynamic publishing technique. In the header of the page, I included the JavaScript file provided with Audio Player and then set up the player in the next <script> tag. Copy that code and replace the size the size that works for you. (The player in my example is set to be 325 pixels wide.) Then in the body of the page, I included a <p> tag that will contain the player. My alter- native content goes inside the <p> tag. It’s replaced when the JavaScript that follows adds the player to the page. In this case, I added a link that points to the MP3 file that the player is going to play. Finally, I embedded the player using JavaScript. For it to work, I specified the ID of the element that will contain the player and specified the location of the audio file. In this case, it’s song.mp3, found in the same directory as the page. Summary In this lesson, you learned about the wide world of tags, codecs, and file formats associ- ated with publishing audio and video on the Web. First, you learned how to upload your video files to YouTube and publish them on your site. You also learned about some Download from www.wowebook.com . type=”text/javascript”> swfobject.registerObject(“myId”, “9.0 .11 5”, “expressInstall.swf”); </script> <object id=”myId” classid=”clsid:D27CDB6E-AE6D -1 1 cf-96B 8-4 44553540000” width=”780” height=”420”> <param. type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’> <source src=”path/to/movie.ogv” type=’video/ogg; codecs=”theora, vorbis”’> <object classid=”clsid:D27CDB6E-AE6D -1 1 cf-96B 8-4 44553540000” ?. type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’> <source src=”path/to/movie.ogv” type=’video/ogg; codecs=”theora, vorbis”’> <object classid=”clsid:D27CDB6E-AE6D -1 1 cf-96B 8-4 44553540000” ?