Please save my skin.
http://clubentertainment.ie/c/art-perf/embed_example.html
The above link should load in Firefox, doesn't load in anything. Doesn't appear to throw any errors. It even validates.
It is using swfobject, all of the links appear to work.. it just isn't actually working. I would like to blame the flash object but as it is working in Firefox the error must be somewhere else.
Any ideas? Is there an alternative way to embed and still have it working?
Furthermore wmode transparency isn't allowing the html dropdown to appear on top of the flash..
Not sure what happens to the bounty - I discovered the problem. The error was definitely with the server. Moved website, changed nothing else. Works just fine. I would just like to thank every one for their help.
I think it is problem with cross domain policy. Try to use relative path url instead of absolute path. You have absolute path now.
When putting the direct link to your swf it works on ie.
http://clubentertainment.ie/c/art-perf/CU3ER.swf
It can be a cross-site problem.
here the code used in CU3ER for demo http://getcu3er.com/features/
<script type="text/javascript">
var vars = { xml_location : '/inc/cu3er/config_features_overview.xml?v=2'};
var params = { wmode:'transparent' };
var attributes = { id:'CU3ER', name:'CU3ER' }; // give an id to the flash object
swfobject.embedSWF("/CU3ER.swf", "cu3er-container", "300", "390", "9.0.45", "/js/expressInstall.swf", vars, params, attributes );
</script>
EDIT:
by just putting your code in the body not the header I got the swf working in ie
<body >
<script type="text/javascript">
// add your FlashVars
var vars = { xml_location : 'http://clubentertainment.ie/c/art-perf/CU3ER-config.xml' };
// add Flash embedding parameters, etc. wmode, bgcolor...
var params = { bgcolor : '#ffffff' };
// Flash object attributes id and name
var attributes = { id:'CU3ER', name:'CU3ER' };
// dynamic embed of Flash, set the location of expressInstall if needed
swfobject.embedSWF('http://clubentertainment.ie/c/art-perf/CU3ER.swf', "CU3ER", 500, 250, "9.0.45", "http://clubentertainment.ie/c/art-perf/js/expressInstall.swf", vars, params, attributes );
// initialize CU3ER class containing Javascript controls and events for CU3ER
// var CU3ER = new CU3ER("CU3ER");
</script>
<!-- CU3ER content HTML part starts here -->
<div id="CU3ER">
<noscript>
<!-- modify this content to provide users without Flash or enabled Javascript with alternative content information -->
<p>Click to get Flash Player<br /><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></p>
<p>or try to enable JavaScript and reload the page
</p>
</noscript>
</div>
<!-- CU3ER content HTML part ends here -->
</body>
I see it not working in Safari 5, but working in Firefox 4. Please try to embed using the SWFObject static publishing method so that you can rule out JavaScript as a potential issue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CU3ER</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/c/art-perf/js/swfobject.js"></script>
<script type="text/javascript" src="/c/art-perf/js/CU3ER.js"></script>
<script type="text/javascript">
swfobject.registerObject("cu3er-container", "9.0.45", "/c/art-perf/js/expressInstall.swf");
</script>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="390" id="cu3er-container" class="CU3ER">
<param name="movie" value="/c/art-perf/CU3ER.swf" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="xml_location=/inc/cu3er/config_features_overview.xml?v=2" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="/c/art-perf/CU3ER.swf" width="300" height="390" class="CU3ER">
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="xml_location=/inc/cu3er/config_features_overview.xml?v=2" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
You may need to adjust your JavaScript to deal with either the 'cu3er-container' ID or the 'CU3ER' class. In this example, SWFObject is only called in if the version of Flash is insufficient so that it can provide the express installer for rapid upgrade, otherwise this does not require JavaScript.
You can always try to embed flash using valid techniques in XHTML. You can find more about this here: http://latrine.dgx.cz/how-to-correctly-insert-a-flash-into-xhtml
As for swfobject, it seems it has some browser dependant issues. I'll try to figure this out later. I'll keep you posted if I come to any conclusions.
EDIT
Try to use relative paths to your swf file. It worked for me.
The SWF is loading just fine for me in Chrome 5.0.375.125, but the slideshow isn't loading. I suspect this may have to do with differences among how different web browsers are handling Javascript errors.
I enabled script debugging for Internet Explorer (I highly recommend doing this) and opened your page, and I immediately got a Javascript error in what appears to be Flash ExternalInterface calls to Javascript functions defined in CU3ER.js. Sometimes browsers decide to stop running scripts altogether when encountering an error, and some just continue. Firefox is in the "just continue" camp. When clicking "ignore" for errors in IE, IE was able to load images but continued to cause Javascript errors.
The Javascript errors appear to be occurring because CU3ER can't find itself in the DOM. This is based on the fact that this Javascript function call is emitted:
__flash__addCallback(document.getElementById(""), "playCU3ER");
That emitted function is defined like this:
function __flash__addCallback(instance, name) {
instance[name] = function () {
return eval(instance.CallFunction("<invoke name=\""+name+"\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments,0) + "</invoke>"));
}
}
The fact that document.getElementById was called with an empty string may mean that there's some missing flash variable that CU3ER requires. Check the documentation for the SWF and make sure you have what's required when embedding. Or it could be a relative vs. absolute URL issue as the others have mentioned.
Related
I have a simple html file which is meant to display embedded flash where I can write straight from the start, withouth clicking on it earlier.
To my dissapointment, I can't do it in my favorite browser! Problem happen to occur only on Opera. On FF and Chrome works fine.
Here's the code:
(...)
<script type="text/javascript">
function setFocus()
{
<!-- document.getElementById("clock-countdown").tabIndex = -1; -->
document.getElementById("clock-countdown").focus();
}
</script>
</head>
<body onLoad="setFocus();">
<object name="clock-countdown" tabIndex="0" >
<embed id="clock-countdown" wmode="opaque" src="clock-countdown.swf"> </embed>
</object>
</body>
It might help to have an external script insert the object/embed into the DOM, to avoid the click-to-activate state. (Sorry about that.. :-/)
there. I know that there is a possibility to open a video file either using a flash player or html5 in a browser, but is there a possibility to open it at the certain place (lets say 60 seconds from the beginning) or automatically fast forward it after opening? Any code examples would be appreaciated.
Ok, I had to find the answer myself. A similar question was addressed at How do I play just a specific section of a video in a web page?
(but without giving specific examples).
I found out that for flv types you can use flowplayer:
http://flowplayer.org/documentation/scripting.html
My minimal working example:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="flowplayer-3.2.4.min.js"></script>
<title>Minimal Flowplayer setup</title>
</head>
<body>
<div style="display:block;width:520px;height:330px" id="player"> </div>
</body>
<script>
$f("player", "../flowplayer-3.2.5.swf", {
clip: {
url: "four_stroke.flv",
autoPlay: true
},
// you can seek to a certain place of a clip just after that place is already is buffered
onStart:function() {
this.seek(10);
}
});
</script>
</html>
For quicktime movie types you can use quicktime plugin and set start or autoplay parameters to start a video clip at specified place like that:
<PARAM Name="AUTOPLAY" Value="#00:03:15:01" >
or
<PARAM NAME="STARTTIME" VALUE="00:03:15:01" >
more explanations at: http://developer.apple.com/library/mac/#documentation/QuickTime/Conceptual/QTScripting_HTML/QTScripting_HTML_Document/ScriptingHTML.html
Here is my code example that works in my FF3.6 and IE8 (put it in your HTML's body area):
<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"
HEIGHT=650
WIDTH=1000
>
<PARAM NAME="src" VALUE="ksetup.mov" >
<PARAM NAME="STARTTIME" VALUE="00:03:00:00" >
<PARAM NAME="AUTOPLAY" VALUE="false" >
<EMBED
SRC="ksetup.mov"
HEIGHT=650 WIDTH=1000
TYPE="video/quicktime"
BGCOLOR=#00ff00
AUTOPLAY="false"
STARTTIME="00:03:00:00"
PLUGINSPAGE="http://www.apple.com/quicktime/download/"
/>
</OBJECT>
Hope this will put someone on track.
I'm using Mac Chrome 8.0.552.237
It seems like whenever I embed flash content in html and open it in chrome when my flash content requests camera access and i need to click "allow" button in the dialog it never recognizes the click. It works fine in firefox. I just simply can't understand why it wont work in chrome. I use swfobject, and i used http://www.bobbyvandersluis.com/swfobject/generator/index.html to make the html code just to make sure i wasn't making any mistakes.
any ideas what I could be doing that causes it to not let me click allow?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("MyFlashContent", "10.1.0", "expressInstall.swf");
</script>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="800" id="MyFlashContent" align="middle">
<param name="movie" value="MyFlashContent.swf" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="MyFlashContent.swf" width="480" height="800" align="middle">
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
EDIT:
Since it seems like the issue might actually be with my actionscrip code, i'll post how i attached the camera.
var youCam:Camera = Camera.getCamera();
you_cam.attachCamera(youCam);
as you can see I have it attached about as simple as it can get, I actually have this right at the top of my code to place the camera on the stage. This works fine when i test it, and it works fine in firefox.
I have no idea why, but because of the large size of the swf canvas, i learned in chrome i had to click the resize corner of the browser and make the window small and then bring it back to the regular size then it would work. no idea why, but this was only hapening in chrome. i fixed the issue by making the overall size of my swf smaller.
Try setting the css display property to 'inline-block'
I had a similar problem. I was using a swf webcam plugin and, on Chrome 21 only, it was not allowing users to click allow. I ended up fixing it by changing it's css 'display' from 'block' to 'inline-block'.
Hope it helps.
I've had an issue like this before, but it wasn't the browser nor the embedding, it was the example code for enabling the webcam (I think this code even came from the Adobe live docs ffs). The issue was that the camera polling already started, before the allow button was pushed. The polling (some augmented reality experiment) was so heavy, that the allow button only registered the click every 1 in 10 times or so. By putting of the camera polling till after the status-event returned with camera.muted == false, I solved my problem.
Maybe it's worth a try. Cheers, EP
Edit: Code example for the handler
var youCam:Camera = Camera.getCamera();
youCam.addEventListener(StatusEvent.STATUS, handleCameraStatus);
...
private function handleCameraStatus(e:StatusEvent):void {
if (e.code == "Camera.Unmuted") {
you_cam.attachCamera(youCam);
} else if (e.code == "Camera.Muted") {
// display message so the user might try again.
}
}
<object height="25" width="75" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="http://click-here-to-listen.com/players/iaPlay13.swf?x=1058286910FTRZGK" name="movie"/>
<param value="high" name="quality"/>
<param value="#FFFFFF" name="bgcolor"/>
<param value="opaque" name="wmode"/>
<embed height="25" width="75" wmode="opaque" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#FFFFFF" quality="high" src="http://click-here-to-listen.com/players/iaPlay13.swf?x=1058286910FTRZGK"/>
</object>
I am having to insert this legacy markup into a new site that I'm building. Problem is its using an <embed> tag.
Would I just do away with the <embed> and put some content in as an alternative, for those that do not have flash? Basically I'm just trying to bring this piece of html into the 21st century.
You can nest object elements to display alternatives. The W3C explains it here. I copied a snippet below:
One significant consequence of the OBJECT element's design is that it offers a mechanism for specifying alternate object renderings; each embedded OBJECT declaration may specify alternate content types. If a user agent cannot render the outermost OBJECT, it tries to render the contents, which may be another OBJECT element, etc.
In the following example, we embed several OBJECT declarations to illustrate how alternate renderings work. A user agent will attempt to render the first OBJECT element it can, in the following order: (1) an Earth applet written in the Python language, (2) an MPEG animation of the Earth, (3) a GIF image of the Earth, (4) alternate text.
<P> <!-- First, try the Python applet -->
<OBJECT title="The Earth as seen from space"
classid="http://www.observer.mars/TheEarth.py">
<!-- Else, try the MPEG video -->
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
<!-- Else, try the GIF image -->
<OBJECT data="TheEarth.gif" type="image/gif">
<!-- Else render the text -->
The <STRONG>Earth</STRONG> as seen from space.
</OBJECT>
</OBJECT>
</OBJECT>
I recommend that you use swfobject which is a cross platform, open source library to display flash on your pages.
http://code.google.com/p/swfobject/
There are a variety of ways to load the flash and the alternative (non-flash) content. For example the following code could replace your code:
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("http://click-here-to-listen.com/players/iaPlay13.swf?x=1058286910FTRZGK",
"myContent", "25", "75", "9.0.0");
</script>
<div id="myContent">
<p>Alternative content</p>
</div>
Basically, you should keep embed, because it is a fallback for some old browsers. It might hurt validation of page, but as long as you know why it is there, it is OK.
At least that's the way Adobe officially recommends: Macromedia Flash OBJECT and EMBED tag syntax
You are right to want to do code for XXIth century, but we have to deal with browser from previous millennium... :-)
I use function AC_FL_RunContent for embedding flash objects - it's good because it supports all browsers and is recommended by Adobe.
More is here:
They also suggest using <object> tag instead of <embed>
I found this code on the web (from a usability site) which caters for IE and others, and I use it on my flash pages (I've changed it to your code):
<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="http://click-here-to-listen.com/players/iaPlay13.swf?x=1058286910FTRZGK" width="75" height="25">
<!-- <![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="75" height="25">
<param name="movie" value="http://click-here-to-listen.com/players/iaPlay13.swf?x=1058286910FTRZGK" />
<!--><!--dgx-->
<param name="loop" value="false">
<param name="menu" value="false">
<param name="quality" value="high">
</object>
<!-- <![endif]-->
Are there any ways providing an alternate GIF/PNG image, in case the user has no Adobe Flash installed and/or deactivated.
I’ve found recommendations, like the following from W3C, which determine via JavaScript the existence of Adobe Flash on the client: W3C Providing alternative images
Honestly, I would prefer a non JS technique. I’m thinking of some XHTML tag, equivalent to <noscript>. (like <noobject> if the object (in our case Flash) can’t be displayed/loaded).
The reason for needing this separation is the following:
The bank I’m working for will preferably display their banners in Flash format. In case it isn’t possible a simple image should be shown.
In the past it was solved very likely in the way mentioned before. We’re currently working on a design refresh and that’s where I stumbled upon this piece of code which makes me wonder if it’s really the most elegant and compatible way of doing so.
Another idea that strikes me: Is it actually possible to load Flash-objects in a JavaScript disabled environment?
Actually having flash installed but javascript turned off is a valid scenario. This should work across most browsers:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="flashContent">
<param name="movie" value="flash.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash.swf" width="800" height="600">
<!--<![endif]-->
<img src="(...)" alt="Put your alternate content here" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
I use the following code for graceful degradation. It works well.
<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="flash.swf" width="500" height="100">
<!-- <![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="500" height="100">
<param name="movie" value="flash.swf" />
<!--><!--dgx-->
<param name="loop" value="false">
<param name="menu" value="false">
<param name="quality" value="high">
<img src="flash_replacement.png" width="500" height="100" alt="No Flash">
</object>
<!-- <![endif]-->
I don't know why you want to avoid javascript, it is the best solution when dealing with Flash.
using the SWFObjects Library (the best known so far for the matter) you can do this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> My Home Page </title>
<meta name="viewport" content="width=780">
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="splashintro">
<img src="splash_noflash.png" />
</div>
<script type="text/javascript">
var so = new SWFObject("csplash.swf", "my_intro", "300", "240", "8", "#338899");
so.write("splashintro");
</script>
</body>
</html>
what the script does is replace the splashintro div with the flash file, if the browser does not support Flash, then does nothing and the splash_noflash.png will be shown.
P.S. With this technique you are ready for the iPhone, instead of showing the blue cube, it will show the image :)
I find using inline styling to do the trick.
For example:
<div style="background-image: url('...');">
<object>
/* Embedded Flash */
</object>
</div>
We can provide an alternate GIF/PNG image, in case the user has no Adobe Flash installed and/or deactivated.
<object id="flashcontent classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550px" height="400px">
<param name="movie" value="mymovie.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="mymovie.swf" width="550px" height="400px">
<!--<![endif]-->
<p>
Fallback or 'alternate' content goes here.
This content will only be visible if the SWF fails to load.
</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
And also add this...
<script type="text/javascript">
swfobject.registerObject("flashcontent", "9", "/path/to/expressinstall.swf");
</script>
I have written an easy way to do this in CSS - no extra JavaScript at all.
Name your ID/Class where your Flash movie resides and use a background image. Wrap your Flash movie within that div.
For example:
<div ID="MyFlashMovie"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="flashContent">
<param name="movie" value="flashMovie.swf" />... etc., etc.</object>
</div> etc.
Then in your CSS:
#MyFlashMovie {
background: url("alternateGraphic.png");
background-repeat: no-repeat;
height: XXpx;
width: XXpx;
}
When the Flash isn't available, say on the iphone/pad, the graphic will display. The only drawback with this, that I have found, is that if your Flash movie uses a transparent background, you will see the alt graphic through the transitions. Just make a solid color within the Flash movie as your lowest layer (make sure it's the same bg color as the website) and it will look fine.
~GreaseJunkie