We Keep Coding

How can I replay a swf movie on jquery button click?

I have a webpage with several swf movies that is created in dreamweaver and outputs several object tags like such:
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="160" height="600">
<param name="movie" value="Banners Template/Example_160x600.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Banners Template/Example_160x600.swf" width="160" height="600">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
I would like to do the following:
The Swf animation runs once through on page load(This is
currently happening)
Once user clicks a 'Replay Movie' button,
the swf it is associated with will replay until the movie finishes.
I have been trying to find some code that can utilize javascript or jQuery to either reload the contents of the object tag or replay the swf with no success. How can I replay a swf movie on jquery button click?

demo: http://jsfiddle.net/tive/Ff7Mq/
demo2: http://jsfiddle.net/tive/J6WQm/
capture the event and change the source of the file.
Or use your swf object to render the div again.
var initVideos = function () {
var divs = $("ul li a");
// bind your click event to the divs
divs.click(function (e) {
e.preventDefault(); // use this when you're triggering anchor tags
flashembed("videoArea", $(this).prop("href"));
divs.removeClass("active");
$(this).addClass("active");
});
};

Will Flash object embeds on my website be an issue for Javascript key events? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How do I make flex only consume mouse scroll and keyboard events when it's useful, and otherwise pass it on to the browser?
I'm making a web application with hotkey support, but the application utilizes flash quite heavily in the form of justin.tv stream embeds. I'm worried that once a user presses play or stop or focuses the flash field in any other way it will eat all subsequent key events before they reach Javascript. I'm worried because I know that the YouTube flash field does this; once it's focused I can't close the browser window with CTRL+W or CTRL+Tab into another tab.
Is that unique to the YouTube flash player? If not, is there anything I can do on the Javascript side to make sure focus remains on my application, allowing my hotkeys to function?
Any additional information on the topic of Javascript key events and browser plugins would be appreciated.
PS: I am aware I can deny access to the Flash field altogether by means of an invisible div overlay, but I would prefer any user to be allowed to play/stop and control the volume of the embedded stream.

This solution has only been tested on Firefox on Windows.
The main problem seems to be removing keyboard focus from Flash. Setting focus to Flash has some solutions on SO already.
After some playing around, I figured out that using jQuery (latest), you can direct focus to a form's text box, which will seize the control of keyboard input from Flash. The solution follows this process:
ExternalInterface in Flash sends a command to javascript
Javascript (using jQuery in this example) sets focus to a form text field
Javascript removes focus from Flash (using this SO method to get to the Flash object)
Here is AS3 code. (I set this up in the Flash IDE, so you will have to adjust it if using external AS3 files):
import flash.events.KeyboardEvent;
stage.addEventListener(KeyboardEvent.KEY_DOWN, displayKey);
function displayKey(keyEvent:KeyboardEvent) {
/* You can use this commented code for limiting the keys that change focus. */
/*
var modifier:String="";
var keyPressed:String="";
if (keyEvent.ctrlKey) {
modifier="Ctrl + ";
} else if (keyEvent.altKey) {
modifier="Alt + ";
} else if (keyEvent.shiftKey) {
modifier="Shift + ";
}
keyPressed=keyEvent.keyCode.toString();
// make sure to add a textfield to the stage, and name it "myTextField" to make this line work:
myTextField.text= modifier + keyPressed;
*/
if (ExternalInterface.available) {
// Limit the keystrokes using javascript by using this method:
// ExternalInterface.call("sendToJavaScript", modifier + keyPressed );
// Any keystroke will unfocus:
ExternalInterface.call("sendToJavaScript", "");
}
}
Sample HTML/Javascript code follows; you will need swfobject.js file in the same directory. Note that the id for the Flash element is the default from the Flash IDE, and the id for the text input is text1.
<!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>testFocus</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; background-color: #ffffff;}
body { margin:0; padding:0; }
#flashContent { width:100%; height:100%; }
.focus {
border: 10px solid #00ffff;
background-color: #ff0000;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script>
</head>
<body>
<div id="outerdiv"><form id="form1">
<input type="text" value="hmmm" id="text1">test</input>
</form>
</div>
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1024" height="768" id="testFocus" align="middle">
<param name="movie" value="testFocus.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#0033ff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="testFocus.swf" width="1024" height="768">
<param name="movie" value="testFocus.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#0033ff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<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>
<script language="JavaScript">
$(document).ready(function() {
// just for kicks:
$('#text1').blur(function(){
$(this).removeClass("focus");
});
// handles form's text input focus (referenced by element's id):
$('#text1').focus(function() {
//alert('Handler for .focus() called.');
$(this).addClass("focus");
removeFocusOnFlash();
});
});
function removeFocusOnFlash() {
// Find the Flash container:
var f = $('#flashContent');
if (f) {
// Hide flash:
f.tabIndex = 0;
f.blur();
f.removeClass("focus");
}
}
// This is called by the Flash file:
function sendToJavaScript(value) {
// set focus on the form's text input field:
$('#text1').focus();
}
</script>
</body>
</html>

Unless Flash is activated through user interaction, it doesn't receive key events. However, once it happens, it doesn't retransmit key events to DOM. Unfortunately, even though you could trap all keys in JavaScript, you wouldn't be able in general to notify Flash when you choose too. Flash won't also receive focus through tabbing, but once it has focus, will not transfer it back to the page. There are only certain key combinations that you can't listen to in Flash (because they are handled by the browser), such as Ctrl+O for example.
But if you have control over the code executed in Flash (at least, you have to be able to load foreign SWF into your own SWF), then you could pass keystrokes to it and from it. I'm not sure about the tabstops. I think it would depend on the browser and whether it allows JavaScript to call focus().
Here's a demo, it is for the right mouse click only, but it would be similar for other key/mouse events.

youtube onStateChange event is not working

I have been bashing my head against this for a while now and need some fresh eyes:
I am trying to use the youtube JS api to call a function when the embedded videos state changes. But for some reason the event dosnt seem to be firing and I'm not getting any error in the console.
HTML:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="630" height="350" id="bannerVideo">
<param name="movie" value="http://www.youtube.com/v/6Yfd1uGYgk8?enablejsapi=1&version=3&playerapiid=ytplayer" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/6Yfd1uGYgk8?enablejsapi=1&version=3&playerapiid=ytplayer" width="630" height="350">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<!--<![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>
Javascript:
function onYouTubePlayerReady(playerId) {
//alert(playerId);
ytplayer = document.getElementById("bannerVideo");
//alert(2);
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
//alert(3);
//ytplayer.addEventListener("click", function(){alert('click');});
}
function onytplayerStateChange(newState) {
alert("Player's new state: " + newState);
}
Example site:
http://dev.stewartknapman.com/ytPlayer/
The code I am using is a direct copy & paste from the youtube api site and I am using swf object to embed the code. I am using the static embedding because I will be changing some stuff out with php, but this shouldn't matter... right?
I moved all the code out into its own file just for testing and its hosted on my development server so it shouldn't be a sandbox issue.
I have also tried alerting after every line just to make sure the addEventListener function is not failing. (I have left the alerts in my example code but commented them out.)
After searching previous posts about this error I have found that they were all solved by adding the ID to the right element or parsing the callback function as a string. So I double and triple checking these things but that doesn't seem to be the issue.
Any help would be greatly appreciated.

Have you tried initializing the flash embed using the SWFObject method (as outlined on the YouTube API)?
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer&version=3",
"ytapiplayer", "425", "356", "8", null, null, params, atts);
Replace your tags with the above and configure it to your setup.

Calling Javascript functions from flash

i need help calling a javascript function from flash, i have embedded the flash using swfobject, heres my javascript to embedd it
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "9.0.0", "expressInstall.swf");
</script>
Here is my HTML which is used to show the flash
<div class="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="258" id="myFlashContent">
<param name="movie" value="btnDemo.swf" />
<param name="allowscriptaccess" value="always" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="btnDemo.swf" width="258">
<!--<![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>
And in my flash i have, which should display a popup message
getURL("javascript:alert('hello')");
However, none of this is working.
Anyone have any ideas as to why this isn't working?

You should really use ExternalInterface for doing calls to JavaScript. Using it looks like this:
import flash.external.ExternalInterface;
if(ExternalInterface.available) ExternalInterface.call('alert','hello');
Using the availability test prevents the code throwing an error when running in the IDE.
Also, in your example you are targeting FP9, so your code must be AS3? AS3 has no getURL() method.

jQuery - Java Pre Roll AD over Flash from CPMStar giving issues in IE Only

My Site is: http://butplaygames.com
Here is the code i am putting in my footer right before the body tag:
<script type='text/javascript'>
<!--
(function(i,w,d,p,c,e,s,t){t=d.getElementsByTagName('script');if(!w[i]){w[i]={ads:[]};s=d.createElement('script');s.src='http'+(d.location.protocol=='https:'?'s://server':'://cdn')+'.cpmstar.com/cached/js/global_v100.pack.js';s.type='text/javascript';s.async='';t[0].parentNode.insertBefore(s,t[0]);}
p['poolid'] = myidherewhichiput;
c['background'] = null;
c['close'] = null;
c['type'] = 'game';
w[i].ads.push({params:p,config:c,events:e,overlay:-1,s:t[t.length-1]});})('cpmstar',window,document,{},{},{});
//-->
</script>
My game embed code for flash:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" width="800" height="600" id="TreasureTrash">
<param name="movie" value="MYURL" />
<embed src="MYURL" allowfullscreen="true" allowScriptAccess="always" wmode="opaque" width="800" height="600" name="TreasureTrash" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
<param name="allowfullscreen" value="true" />
<param name="wmode" value="opaque">
</embed></object>
The code works in Firefox, Chrome and Opera. But not in IE. Kindly help. I am very lost here. My site is butplaygames.
An AD is supposed to show over my flash games using the javascript code. It shows in Opera, Firefox and Chrome. But does not show in IE. IE does not even show any errors. It just makes the entire swf into a small dot and does nothing.

The script needs to read the .swf from the src atribute. In your case, in the src atribute there is no .swf there.