Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Troubleshooting Support for Firefox
I've shown you how to embed a video file in a web page using the HTML5 Video element (tag), and you've learned how to add a link that displays if a viewer tries to watch the video in a browsing environment that doesn't support HTML5. So what else can go wrong?
Well, the video won't play in Firefox because we embedded an H.264 video, which is supported in Safari, but not in Firefox. And, because Firefox does support HTML5, the text link we added to open the video in a new browser window also won't display—remember, that text only displays if the browser doesn't support HTML5. Frustrating! Unfortunately, this problem is typical of the kind of issues you'll encounter in trying to make online video accessible to all viewers.
A simple solution is to add a message like this:
Firefox viewers click here to watch the video
Then link that text to a version of the video in one of the formats that Firefox supports: QuickTime (MOV), Windows Video (AVI), or Flash Video (FLV).
A more complex solution would be to use Dreamweaver's Check Plugin behavior from the Behaviors panel. The Check Plugin behavior dialog allows you to screen for visitors who have the Flash Player in their browser. You might elect to allow visitors with Flash support to jump to a different web page that would present the video in a Firefox-friendly format (MOV, AVI, or FLV). Or you could simply open the video itself in a browser window.
To implement this solution, follow these steps:
- Copy a non-H.264 version of your video into the folder you defined as the local site folder for your Dreamweaver website.
- With your web page open (the one that has the H.264 video embedded with the HTML5 Video tag), open the Behaviors panel by choosing Window > Behaviors.
- Click the Add Behavior button (the one with the plus sign), and choose Check Plugin from the pop-up.
- From the Plugin pop-up menu, choose Flash (the default).
- In the "If found, go to URL" box, click the Browse button; then navigate to and select the non-H.264 version of your video. (This can be an AVI file, an MOV file, an FLV file, or some other video file format—just not H.264.)
- In the "Otherwise, go to URL" box, use the Browse button and navigate to your currently open page. Visitors using iPhones, iPads, etc. who don't have Flash support will stay on this page. Figure 5 shows my completed Check Plugin dialog.
- After clicking OK, test the behavior by choosing File > Preview in Browser > Firefox (if you have Firefox installed on your computer). The browser will be redirected to display the non-H.264 video in Firefox.
){kind=small}
Figure 5 Defining the Check Plugin behavior.
There are additional parameters for the HTML5 Video tag, particularly the Height and Width parameters. However, the size of your video display is defined by the size of the video itself, so this parameter isn't essential, and can create more problems than it solves by distorting the video size in Dreamweaver's Design view.