Complete the element thusly: <source src="movies/paris.mp4"
7 Complete the element thusly:
type="video/mp4" /> The next format you will load is WebM, which is an open-source, royalty-free
video format sponsored by Google. It is compatible with Firefox 4, Chrome 6, Opera 10.6, and Internet Exporer 9 and later browsers.
8 Press Enter/Return to create a new line.
Enter <source src="movies/paris.webm" type="video/webm" /> on the
new line. To round out our HTML5 video selections, the next format you’ll load is a lossy,
open-source multimedia format: Ogg. It is designed for the distribution of multimedia content free of copyright and other media restrictions.
Tip: You are using 9 Press Enter/Return to create a new line.
the FLV video as Enter <source src="movies/paris.theora.ogv" type="video/ogg" /> alternate content for
on the new line.
the HTML5 video. In
the same respect, you can insert an FLV video and use the HTML5 <video> element and the <source> references as the alternate content. That way, if the browser or
These three formats should support all the modern desktop and mobile device doesn’t support
browsers. But to support older software and devices, it may be necessary to Flash, the HTML5 video
use a stalwart old friend: Flash video. By adding it last, we’re ensuring that only appears instead.
browsers that don’t support the other three formats will load the Flash content. Although Flash is being abandoned by many, Dreamweaver still provides support for inserting both FLV and SWF files.
10 Press Enter/Return to create a new line. Choose Insert > Media > FLV.
11 When the Insert FLV dialog box appears, make sure the Video Type pop-up menu is set to Progressive Download Video.
294 LESSON 11 Working with Web Animation and Video
12 Click Browse and navigate to the movies folder in the site root folder. Choose paris.flv and click OK/Choose.
To allow the user to start, stop, and rewind the video, you’ll want to add controls. Be sure to pick controls that are no wider than the video itself.
13 From the Skin pop-up menu, choose Corona Skin 3. At 400 pixels in width, any of the available controls will work with this video.
The video controls will automatically appear and disappear when the visitor moves their cursor over the video.
14 Click the Detect Size button to enter the Width and Height of the video automatically, or manually enter Width: 400 and Height: 300. Select the
Constrain and Auto Rewind options. Click OK.
Dreamweaver inserts a placeholder in the layout, which can be customized somewhat with the Property inspector. FLV files cannot be previewed within Design view and must be viewed in Live view or a browser.
15 Save the file. P Note: The Travel page now contains
two notices prompting users to sign up for the Eco-Tour. In Lesson 12, “Working with Forms,” you will create a new page with the sign-up form and link this text
When you save the file, the Copy Dependent Files dialog box may appear, to it. displaying a message explaining that the dependent files expressInstall.swf and
swfobject_modified.js will be placed into a new Scripts folder. These files are essential for running an FLV file in the browser and must be uploaded to your web server to support Flash functionality. If this dialog box appears, click OK.
P Note: The Copy Dependent Files dialog box may not appear for users following the jumpstart method in this lesson. The files already exist in your site folder, and Dreamweaver doesn’t need to
copy them.
ADOBE DREAMWEAVER CS6 CLASSROOM IN A BOOK
16 Switch to Design view. If you use the <video> element without an FLV, Dreamweaver won’t generate a
preview of the video content. Fortunately, it will generate a placeholder for the FLV component. The actual video files will appear only in compatible browsers. The placeholder appears in the layout flush to the left side of <div.content> .
Let’s center it.
17 Click the FLV placeholder. Select the <video> tag selector. In the CSS Styles
panel, click the New CSS Rule icon. The <video> tag is an inline element by default. By assigning it the block
property, you can control how the video aligns on the page and relates to other block elements.
18 Create a new CSS rule named .content section video and enter the
following specifications: Display: block Margin-right: auto Margin-left: auto
Tip: Create custom This rule centers all <video> elements inserted in <div.content> . But the classes as necessary to
element also includes an FLV component, which doesn’t use the <video> tag— control the placement
it uses the <object> tag. To make sure the FLV content is centered, let’s create of individual elements.
a rule for that tag, too.
19 In the CSS Styles panel, right-click the .content video rule and select Edit >
Duplicate from the context menu.
20 Change the rule name to .content section object and click OK to create
the rule. Now all <video> and <object> elements will be centered.
296 LESSON 11 Working with Web Animation and Video
21 Preview the page in Live view, or preview the page in a browser. If the video controls are not visible, move your cursor over the still image to display them.
Click the Play button to view the movie. P Note: Some versions of Microsoft Internet Explorer may block active content until you give the
browser permission to run it. If you don’t have Flash Player, or if it’s not the current version, you may be asked to download the latest version.
Dreamweaver
Chrome
Internet Explorer
Depending on where you preview the page, you will see one of the four video formats. For example, in Live view you will see the FLV-based video. The controls will appear differently depending on what format is displayed. There is no sound in this movie, but the controls will still include a speaker button to adjust the volume or mute the sound.
22 When you’re finished, switch back to Design view. You’ve embedded three HTML5-compatible videos and an FLV fallback, which
should give you support for most browsers and devices that can access the Internet. But you’ve used only one possible technique for supporting this evolving standard. To learn more about HTML5 video and how to implement it, check out the follow- ing links:
1 What advantage does HTML5 have over HTML 4 regarding web-based media?
2 What programming language created the HTML5-compatible animation used in this lesson?
3 True or false: To support all web browsers, you can select a single video format.
4 What video format is recommended to support older browsers?
5 What role do “dependent files” play in the operation of an FLV file?
298 LESSON 11 Working with Web Animation and Video 298 LESSON 11 Working with Web Animation and Video
1 HTML5 has built-in support for web animation and video.
2 The animation used in this lesson was created by Adobe Edge natively using HTML5, CSS3, and JavaScript.
3 False. A single format has not emerged that is supported by every browser. Developers recommend incorporating four video formats to support the majority of browsers:
MP4, WebM, Ogg, and FLV.
4 FLV (Flash video) is recommended as the fallback format for older browsers because of the widespread installation of the Flash Player.
5 Dependent files provide essential functionality on the Internet for playing Flash components and must be uploaded to your server along with the relevant HTML
