Internet Explorer has this annoying feature where all objects, including flash, need to be clicked to activate before you can use them. This was brought about because of a law suit where designers ended up down wind having to deal with this annoyance. So, let's theme the 1pixelout flash player in drupals audio module without the click to activate.
SWFObject instead of jQuery
While, all objects in HTML pages have to be clicked to activate; objects inserted with javascript from an outside file don't have that click to activate. This initially led me to jQuery because it's built into drupal. But, there's a problem. The version of jQuery provided in drupal has been compressed by packer and javascript compressed with packer is not seen as an outside script by eval (IEs function that does the unpacking). This means it can't insert non-click to activate objects. There is a fix for this but it involves altering drupals core.
Instead, I use SWFObject which can be used without altering drupals core and the footprint is roughly the same as applying a patch to the jquery.js and including a jsmined jQuery plug-in to do the same.
Inserting the Object
Lets start by downloading the SWFObject javascript file (you can get it here), decompress the zip, and placing the file swfobject.js in your themes directory.
Next, create a function phptemplate_audio_1pixelout_node_player or mythemename_audio_1pixelout_node_player in your template.php file. This will give us the opportunity to override the default theming.
Note: If you haven't read my post on theming this player in general check it out here. There is some pre-requisite information you may want to know.
The function should look something like:
<?php
function phptemplate_audio_1pixelout_node_player($node, $options = array()) {
// Set some player color options
$options['leftbg'] = '0x000000';
$options['rightbg'] = '0x000000';
$options['lefticon'] = '0xFFFFFF';
$options['righticon'] = '0xFFFFFF';
//Insert the flash player script
drupal_add_js(path_to_theme().'/swfobject.js', 'theme');
//Insert the individual flash player
// make sure it's compatible with the flash player
if (!audio_is_flash_playable($node)) {
return NULL;
}
$options['soundFile'] = check_url($node->url_play);
$url = base_path() . drupal_get_path('module', 'audio') .'/players/1pixelout.swf';
$flashvars = drupal_query_string_encode($options);
$output = <<<EOT
<span id="flashfixme$node->nid"><script type="text/javascript">
var so = new SWFObject("$url", "audioplayer", "290", "24", "7", "#353535");
so.addParam("$url");
so.addParam("quality", "high");
so.addParam("wmode", "transparent");
so.addParam("menu", "false");
so.addParam("pluginurl","http://www.macromedia.com/go/getflashplayer");
so.addParam("flashvars","$flashvars");
so.write("flashfixme$node->nid");
EOT;
//For those times when there is noscript
$output .= "</script><noscript>";
$output .= theme_audio_1pixelout_node_player($node, $options);
$output .= "</noscript></span>";
return $output;
}
?>Breaking down what this does we start with configurable options for the flash player. In this case the function is changing some of the colors. This is follow by loading the swfobject.js file (if you have the player on a page more than once it's smart enough to only include the file once).
Next, we have the major addition. We are checking the file to make sure it's playable by the flash player and then inserting the javascript code for swfobject to insert the player. This is followed by the <noscript> usage for browsers that don't have javascript or it's turned off.
With just a little magic the click to activate in IE is gone.
Pre-existing modules
Please see http://cvs.drupal.org/viewcvs/drupal/contributions/modules/swftools/ for flash related modules. SWFObject is one among them. Besides this, there are also separate projects named swfobject and swfobject_api that accomplish the same thing.
-K
1pixelout flash support needed
This looks like a neat project though it doesn't support the 1pixelout flash player out of the box.
Another Embed Script
You may want to check out Unobtrusive Flash Object as well. It is what my workplace uses to embed Flash objects.
swfobject is smaller
In the interest of a small footprint, swfobject is smaller. I wonder what the differences are in functionality?
Yeah,
I've had better luck with UFO than SWFobject, too. Both of the creators (UFO and SWFoject) are allegedly working together to create a new solution...
Oh, yeah - I just remember what I don't like about SWFobject - it doesn't produce valid xhtml - even though it claims it does.
not valid
Good call. It does not produce strict or even transitional xhtml. It's just not valid. I'll have to test UFO for the same things.
Take a look at this solution with just 2 lines of code.
Guys check out this site which has a solution to flash objects 'click here to activate control' not seen it before anywhere and it works on blogs as well. http://clickheretoactivate.blogspot.com/
That works but....
That does work. But, I noticed a few things.
First, it produces code that isn't standards compliant. It really should be reworked using object instead of embed for the tag.
Second, this solution does not take into account browsers that don't have javascript or where javascript is turned off. They really should explain the noscript tag.
Third, this does work but what happens when you many audio nodes? Each audio file would need it's own outside file to include to bring in the flash. Doing something like what is described above and putting it in the theme scales from one audio node to 1000 to even more. If you're doing a podcast this is the more efficient and overall easier solution.