I have a little site, not yet online but that doesn't matter. Inside I have two frames:
<html>
<frameset border="transparent" cols="63%,37%">
<frame src="A.html" name="A" NORESIZE>
<frame src="B.html" name="B" NORESIZE>
</frameset>
</html>
In frame A there is a button.
<html>
<body>
<input onClick="#" type="button"/>
</body>
</html>
In frame B there is a youtube video:
<html>
<body>
<object id="obj" name="obj" width="100%" height="100%">
<param id="param" name="movie" value="http://www.youtube.com/url"/>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"/>
<embed id="embed" name="embed" src="http://www.youtube.com/url"" type="application/x-shockwave-flash" width="100%" height="100%" allowfullscreen="true"/>
</object>
</body>
</html>
Now I'm trying to let the embed's source and the parameter's (named movie) value change into another url. I've tried a lot of codes. The following Javascript codes, for example, won't work:
top.frames["B"].document.getElementById("movie").value = 'http://www.youtube.com/otherurl';
top.frames["B"].document.getElementById("embed").src = 'http://www.youtube.com/otherurl';
So if anyone know how to do these codes right or how to get the same result with other codes, I'd really appreciate it.Anticipated thanks, VVW.
Your DOM is broketh:
Change <param id="param" name="movie" value="http://www.youtube.com/url"
to .. <param id="param" name="movie" value="http://www.youtube.com/url" />
From the parent you can't access nor manipulate elements in the child frame, it's a security measure, otherwise it would be easy to come out with malicious sites that wrap banking sites in iframes and the parent would read the password that you enter into it.
Don't do frames.
Use the YouTube JavaScript Player API. Call player.loadVideoById(). Make sure your original src URL contains &enablejsapi=1:
top.frames["B"].document.getElementById("embed").loadVideoById(id);
Thanks to anyone who answered. I experimented a bit with all of the codes and my result is actually very simple.
top.frames["divtest"].document.getElementById("embed").setAttribute('src','http://www.youtube.com/v/lPMx86wXaKY?version=3&hl=nl_NL');
top.frames["divtest"].document.getElementById("param").setAttribute('value','http://www.youtube.com/v/lPMx86wXaKY?version=3&hl=nl_NL');
I wonder why I didn't come up with that earlier so I appologise to everyone and thank you all for all the help.
VVW
Related
I am new to AS3, and would like to trigger an as3 function from javascript.
AS3
package code {
import flash.display.MovieClip;
import flash.external.ExternalInterface;
import flash.text.TextFormat;
public class Main extends MovieClip {
public function Main() {
ExternalInterface.addCallback("changesize", this.setStyle);
}
protected function setStyle() {
var tf:TextFormat = new TextFormat();
tf.size = 15;
editabletext.setTextFormat(tf);
}
}
}
html
<html><head>
<meta charset="UTF-8">
<title>animator</title>
<style type="text/css" media="screen">
html, body { height:100%; background-color: #ffffff;}
body { margin:0; padding:0; overflow:hidden; }
#flashContent { width:100%; height:100%; }
</style>
</head>
<body>
<div id="flashContent">
<object type="application/x-shockwave-flash" data="animator.swf" width="550" height="400" id="animator" style="float: none; vertical-align:middle">
<param name="movie" value="animator.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">
<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="always">
<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>
</object>
</div>
<script type="text/javascript">
var animator = document.getElementById('animator');
animator.changesize();
</script>
</body></html>
animator.changesize() gives me Uncaught TypeError: animator.changesize is not a function
I have also tried changing allowscript access between sameDomain and always. neither seems to work
It's a timing issue. The callback will only get added to the DOM once the SWF has been loaded by the Flash Player and the Main constructor is executed, but you are trying to call it immediately when the DOM is parsed.
Since the DOM is always going to be parsed before the SWF is loaded (and the callback is added) you should not assume that the SWF callback is always there and ready to be called. Instead, the SWF should call into JS when it is ready.
As mentioned in the comments, first check if ExternalInterface.available is true and test on a server (could be localhost if you set one up locally).
I also notice you have an <object> but no <embed> tag. Some browsers use the object tag, while others use the embed tag. Make sure the id and name for these tags are the same.
Even better, I recommend using swfobject as it takes care of these issues and make the code a bit cleaner. Please have a look at the SWFObject External Interface article and example
I'd like to open a SoundCloud player in a new window when a user clicks a link. Below is an example:
<object height="220" width="220"><param name="movie" value="https://player.soundcloud.com/player.swf?url=https%3A//api.soundcloud.com/tracks/124173519&color=ff5500&auto_play=false&player_type=artwork"></param><param name="allowscriptaccess" value="always"></param><embed allowscriptaccess="always" width="220" height="220" src="https://player.soundcloud.com/player.swf?url=https%3A//api.soundcloud.com/tracks/124173519&color=ff5500&auto_play=false&player_type=artwork" type="application/x-shockwave-flash"></embed></object>
I've tried various tricks, but to no avail. If a user could point me in the right direction, it would be greatly appreciated.
Create something like: <a href='javascript:window.open("page.html")' target="_blank" >link</a> where you include the <object ../> tag in 'page.html'.
if you can dynamically generate the object with a complete html, you can use javascript:
window.open(URL,name,specs,replace)
Example of Server side script:
//playsound.php
<html>
<head>
.....
</head>
<body>
......
<object height="220" width="220"><param name="movie" value="https://player.soundcloud.com/player.swf?url=https%3A//api.soundcloud.com/tracks/124173519&color=ff5500&auto_play=false&player_type=artwork"></param><param name="allowscriptaccess" value="always"></param><embed allowscriptaccess="always" width="220" height="220" src="https://player.soundcloud.com/player.swf?url=https%3A//api.soundcloud.com/tracks/124173519&color=ff5500&auto_play=false&player_type=artwork" type="application/x-shockwave-flash"></embed></object>
</body>
</html>
So if a user clicks on the link in the main window, another window pops up to play the media. I hope this helps
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.
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.
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.