View Full Version : Embedded Audio Controller is all Black Color

03-13-2010, 01:15 AM
I'm using Dreamweaver CS4 on Windows Vista. I successfully embedded my first MP3 file in a new website. It plays OK in the preview browsers, but the embedded controller (with the play/pause buttons) is all black in color. I know the controller bar is under the black, because when I click on it in various places it controls the audio playback. If I click on the left edge of the black bar, the volume slider even shows up! (see attachment).

The tutorials make it look so easy, but they get a nice little controller with buttons and a slider. All I get is a black colored bar. I've used Google to search everything I can think of, but have found no reference to this problem.

Please help.

03-13-2010, 01:44 AM
I decided to post the problem page to my website to see what would happen. Sure enough the black controller shows up on the webpage. Here's the URL:

Scroll all the way down to the bottom of the page to see the black controller.

What do you think the problem might be?

03-13-2010, 02:42 AM
i checked with ff and IE*8 both show a play bar,
try adding a doctype to your page though it might be a browser issue then

03-13-2010, 03:24 AM
I've also run into this and another issue placing video with Quicktime. Here's the best I was able to figure out a few months ago:

Placing a QuickTime video in a web page can result in two issues in Internet Explorer:

The controller bar appears as a black rectangle rather than displaying the movie controls (may also applies to other Windows browsers).

The user is not prompted to install the QuickTime plugin if it isn't present.

The first problem is apparently a bug in either QT or Windows Vista-64 and can't be addressed by the creator of a web page. It requires that the user run Explorer in XP Service Pack 2 compatibility mode. Instructions are here:


The second issue will not affect users with the QT plugin installed. However if the plugin isn't present Explorer requires a bit of extra code to find and prompt the user to install it. That code looks like this:

<object width="190" height="256"
<param name="src" value="images/sample.mov">
<param name="autoplay" value="false">
<param name="controller" value="true">

<embed src="images/sample.mov" width="190" height="256"
autoplay="false" controller="true"


There's no way to insert this code using Dreamweaver's visual editing tools. So to use it you'll need to copy the code and paste it in the proper location in the code of your page. Note there are a couple of tricks to making this work.

The parameters are set twice: once for the object tag (Explorer) and once for the embed tag (everyone else). So you need to edit the values for width, height, src, autoplay and loop (and any other parameter you choose to use) in both places.

Special code is required for Explorer to properly locate the plugin. Specifically the classid and the codebase must appear exactly as they are in the example above. (Note: This is independent of the pluginspage parameter which is still required for other browsers)

Finally, given these issues (especially the black controller bar, which the page creator can't work around), I'd recommend against placing QuickTime movies in your pages at the current time. (Although if your are placing the movie without a controller AND autoplay it, you should be safe.)

HOWEVER, you can upload QuickTime movies to YouTube and place the YouTube video on your page. That's probably the best solution.

03-13-2010, 03:25 AM
By the way I hope edbr is correct and I've just missed a simple solution.