Σελίδες

Δευτέρα, 14 Ιουνίου 2010

Dreamweaver

Setting HTML5 video options

One of the final steps for configuring the video is to decide what other HTML5-supported options to specify. The options are displayed within the Property inspector whenever the <video> element is chosen. The options are selectable in all views.
1 If necessary, open travel.html in Live view. Select the <video> tag selector. Observe the left side of the Property inspector.
• Controls displays visible video controls.
• AutoPlay starts the video automatically after the webpage loads.
• Loop causes the video to replay from the beginning automatically once it finishes.
• Muted silences the audio.
• Preload specifies the method in which the video loads.
2 If necessary, select the Controls option and deselect the AutoPlay, Loop, and Muted options. Set Preload to none.
A screenshot shows the "Property inspector."
Video is very memory- and bandwidth-intensive. This is especially true for phones and tablets. Setting Preload to None prevents any video resources from downloading until the user actually clicks the video. It may require a few extra seconds for the video to download when launched, but your visitors will appreciate that you are respectful of their minutes and data plan.
Although these settings complete the structure of the <video> element, you still need to make sure the video works properly on all screens and devices.

Making the video responsive

The <video> element is complete, but you may have noticed that the preview doesn’t seem to match the dimensions you entered earlier. That’s because the CSS controlling the Bootstrap structure of the element has already taken over from the HTML attributes. Unfortunately, the default settings for the embedded video are expecting a video with an aspect ratio of 16:9. The one you’re using is actually 4:3. Luckily, this is an easy fix.
1 If necessary, open travel.html in Split view.
2 In the Code view window locate the <video> element (around line 100). 
Note the parent <div> element.
This is the responsive Bootstrap embed element. It controls the size of the video on all screens and devices. Note the classes assigned to it. The second class embed-responsive-16by9 designates this structure for an aspect ratio of 16:9.
3 Edit the class as shown: embed-responsive-4by3
A set of two screenshots show class "embed-responsive-4by3" being edited.
As soon as you complete the change, the video preview expands to fill the entire column. There’s only one modification left to do. The original <iframe> had a responsive Bootstrap class assigned to it. To complete the responsive styling to your new HTML5 video, you need to reapply the class to the <video> element.
4 Select the video tag selector.
5 In the Property inspector class menu, select: 
embed-responsive-item
A screenshot shows various rows of the HTML codes at the top and the "Property inspector" at the bottom. The video tag selector is selected and option "embed-responsive" is being selected from the context menu.
6 Save all files.
A dialog may appear indicating that certain files are being added to the site to support the Flash video. Click to close the dialogs to complete the process. Be sure these files are uploaded to your site; they may not be picked up automatically by Dreamweaver.
7 Preview the page in Live view or 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.
A set of three screenshots shows preview of a video in browsers Chrome, Firefox, and Safari.
Image Note:
The animation may not preview properly using real-time preview. You may need to open the file directly in the browser.
Depending on where you preview the page, you will see one of the four video formats or the static poster image. For example, in Live view you will see the MP4-based video. The controls will also appear differently depending on what format is displayed. This movie has no sound, but the controls will often include a speaker button to adjust the volume or mute the audio.
8 In Dreamweaver, drag the Scrubber to the left to check the display of the video at various screen widths.
The video resizes as needed to fit the available space.