We Keep Coding

How can i get the Flash real url in <object> by JavaScript?

The Flash movie is in the object, when the Flash movie is playing I check the element in Chrome, and the code is like this:
<object type="application/x-shockwave-flash" data="http://s2.pstatp.com/site/video/player.swf" width="100%" height="100%" id="vjs_video_3_Flash_api" name="vjs_video_3_Flash_api" class="vjs-tech">
<param name="movie" value="http://s2.pstatp.com/site/video/player.swf">
<param name="flashvars" value="readyFunction=videojs.Flash.onReady&eventProxyFunction=videojs.Flash.onEvent&errorEventProxyFunction=videojs.Flash.onError&autoplay=false&preload=auto&loop=false&muted=undefined&">
<param name="allowScriptAccess" value="always">
<param name="allowNetworking" value="all"><param name="wmode" value="opaque">
<param name="bgcolor" value="#000000">
</object>
I can't see the embed. Why can it play without the embed? Now I have got the <object> element by document.getElementsByTagName('object') in the Chrome console, but how can I get the Flash URL with JavaScript?

Something like this should work:
function getMovieUrl(obj) {
Array.prototype.forEach.call(obj.children, function(param) {
if (param.getAttribute('name') === 'movie') {
return param.geAttribute('value');
}
});
return null;
}

How to stop video in ie8 when hiding a div?

I have written some JavaScript that will display a video when someone clicks on a picture and then they can click on the "x" to close the video but the video continues to play in ie8 when hidden but stops with FireFox and Chrome. If anyone can tell me how to fix this by having the video stop when the "xbutton" image is clicked I'd greatly appreciate it I have been fighting with this for hours. This is what I have so for JavaScript:
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';} }
function blanket_size(popUpDivVar) {
var blanket = document.getElementById('blanket');
blanket_height = document.body.parentNode.scrollHeight;
blanket.style.height = blanket_height + 'px';
}
function popup(windowname) {
blanket_size(windowname);
toggle('blanket');
toggle(windowname);
}
and this is the html I am using. I am just using dreamweaver to add a .flv video file from my computer.
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#popUpDiv" onclick="popup('popUpDiv')"><img
src="../New images/newxbtn-red.png" class ="xbutton" alt = "Close"/></a>
<p> Video Header</p>
<!--Dreamweaver video code starts here -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="622"
height="350" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="allowScriptAccess" value="always" />
<param name="FlashVars"
value="&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=video/bf-
eng&autoPlay=true&autoRewind=false" />
<param name="swfversion" value="8,0,0,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="FLVPlayer_Progressive.swf"
width="622" height="350">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="allowScriptAccess" value="always" />
<param name="FlashVars"
value="&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=video/bf-
eng&autoPlay=true&autoRewind=false" />
<param name="swfversion" value="8,0,0,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>
<p><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></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
<!-- Video Ends -->
</div>
<div class ="image">
<a href="#popUpDiv" onclick="popup('popUpDiv')">
<img src="img/farmers/Donahue_Beef.jpg" width="190" height="110" alt="Beef" />
<img src="../New images/playbtn.png" width="200" height="116" alt="Play" class =
"play"/></a>
</div>
Thanks again!

There may be a very easy way using jQuery. In my case I generated a flash embed div with object in it. With jQuery you can easily define a close button with the empty() function on click. This clears the content of the div and the video is no longer in the DOM.
$("#video a.close").click(function(){
$("#flashlayer").empty();
}

First, you'll have to listen for the click event on your xbutton element (which I recommend adding an ID to):
function listen(event, elem, func) {
if (elem.addEventListener) {
elem.addEventListener(event, func, false);
} else if (elem.attachEvent) {
elem.attachEvent(event, func);
}
}
listen('load', window, function() {
var xbutton = document.getElementById('xbutton');
var player = document.getElementById('FLVPlayer');
listen('click', xbutton, function(e) {
player.Stop();
e.preventDefault();
});
});
You can use the JavaScript method Stop() to stop your Flash video.

Resizing SWFs with JavaScript

My client wants a silly intro page where, onClick, doors to a warehouse open into the warehouse itself (redirect into the website). I created a 1920 x 1174 SWF that does just so. It can be seen here. As you will notice, the backdrop of the warehouse and sky are included in the SWF. Just a minor question: is there a better way to do that? One thought was to crop the sky out of the SWF and make the animation smaller so it could be centered with CSS on the intro page. Then make the background-image the sky.
My big problem is the resizing. My (possibly ignorant) assumption is that if I make the SWF really large, it can be scaled down for different resolutions and the aspect ratio kept.
I have tried both of the suggestions at www aleosoft com/flashtutorial_autofit.html and they wildly distort my SWF (which can be seen here). Is this because of my publishing settings?
I turned to JavaScript for somewhat of an answer. Right now I am resizing the swf onload to the screen width and height because window inner height and inner width also distort the aspect ratio. I would like for it to work like www aleosoft com/flashtutorial_autofitexample.html
var w = screen.width, h=screen.height;
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="'+w+'" height="'+h+'">');
document.write('<param name="movie" value="movie.swf">');
document.write('<param name="scale" VALUE="exactfit">');
document.write('<embed src="movie.swf" width="'+w+'" height="'+h+'"></embed>');
document.write('</object>');
I am open to using the object/embed parameters as a solution or JavaScript. I'd rather not use jQuery but I will if necessary.

To achieve best quality you should use stage.fullScreenHeight and stage.fullScreenWidth to determine window size and also handle window resizing event.
Image and the picture of the building should be a separate movie clip.
There is some AS3 code to do that (should be put at the first frame of movie):
import flash.events.Event;
import flash.events.MouseEvent;
import flash.media.Sound;
import fl.transitions.Tween;
import fl.transitions.easing.*;
var t:Tween;
var u:Tween;
var i:Tween;
if(stage) init(null);
else addEventListener(Event.ADDED_TO_STAGE, init);
function init(e:Event){
stage.scaleMode = StageScaleMode.NO_SCALE; //You don't want to scale anything
stage.align = StageAlign.TOP_LEFT;
resizeHandler(null);
stage.addEventListener(Event.RESIZE, resizeHandler); //function that will be executed at every window size change.
/* some animations.
new Tween(object, "property", EasingType, begin, end, duration, useSeconds);
property - This is the name of the property which will be animated, it must be specified as a string (between quotation marks). Example: "alpha", "scaleX", "scaleY", "x", "y". so you can calculate this vaules depending on the current window size
*/
logo_mc.logo1_mc.visible = false;
logo_mc.logo2_mc.visible = true;
t=new Tween(bg_top_mc, "height", Strong.easeOut, bg_top_mc.height, 341, 2, true);
u=new Tween(diamonds_mc, "y", Strong.easeOut, diamonds_mc.y, 208, 2, true);
i=new Tween(gradients_mc, "y", Strong.easeOut, gradients_mc.y, 221, 2, true);
}
function resizeHandler(e:Event):void {
var sw = stage.stageWidth;
var sh = stage.stageHeight;
//put a footer at the bottom of window
footer_bg_mc.width = sw;
footer_bg_mc.y = sh - footer_bg_mc.height;
//specify ALL elements positions depending on the window size, it is called liquid layout
copyright_mc.y = stage.stageHeight - copyright_mc.height - 8;
//center
logo_mc.x = stage.stageWidth - logo_mc.width - 40;
//you can also scale text size
var format:TextFormat = new TextFormat();
format.size = Math.round(stage.stageWidth/20);
myTextField.setTextFormat(format);
gradients_mc.width = stage.stageWidth;
bg_top_mc.width = stage.stageWidth;
bg_site_mc.width = sw;
bg_site_mc.height = sh;
content_mc.x = 0;
content_mc.y = 0;
}
In your xhtml you can have:
...
<head>
<style type="text/css" media="screen">
html, body { height:100%; background-color: #27262e;}
body { margin:0; padding:0; overflow:hidden; }
#flashContent { width:100%; height:100%; }
</style>
...
<body>
<div id="flashContent">
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="index" align="middle">
<param name="allowFullScreen" value="true" />
<param name="movie" value="index.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#e7e7e7" />
<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="index.swf" width="100%" height="100%">
<param name="allowFullScreen" value="true" />
<param name="movie" value="index.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#e7e7e7" />
<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> ...
This liquid layout is not probably the greatest solution for you, but you can use this to make text fit to the window. You can try to "make this building float" both sides can be filled with background. This is not true that if you make everything big that would make downscaled image better looking, that depends on a algorithm.
You can achieve better effect sticking to CSS and JavaScript. the doors can stay in SWF.

The following code (no javascript needed) doesn't distort (tested on Firefox 10, Ubuntu; Firefox 4.0, Windows XP; IE 6 and 8, Windows Xp) :
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>Platinum Buyer's Club</title>
<style type="text/css">
html, body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<object width="100%" height="100%" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="movie" value="http://www.example.com/example.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="SCALE" value="default">
<embed width="100%" height="100%" src="http://www.example.com/example.swf"
quality="high" type="application/x-shockwave-flash" wmode="transparent" scale="default"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>
</body>
</html>
However it seems still not working on MacOS browser (not sure whether it's a Flash plugin or browser issue)

youtube's embeded video wont go behind other elements

I have a site that has YouTube's embedded video in it, my problem is, these videos don't obey the z-index rules. All the YouTube videos are displayed on top of all other elements. I tried
$('iframe','.video_container').attr('wmode','opaque');
$('iframe','.video_container').attr('z-index','1');
I found that the wmmode has to be changed to opaque, but isn't this for the old embedded videos??
How do i achieve this for both old embedded style videos and the new iframes??
Edit:
Even this didn't work on old embedded videos
$('object','.video_container').append('<param name="wmode" value="opaque"></param>').find("embed").attr('wmode', 'opaque');
this works on iframe videos
var src=$('iframe','.video_container').attr('src');
if(src.indexOf('?')==-1)
{
src=src+'?wmode=transparent';
}
else
{
src=src+'&wmode=transparent';
}
$('iframe','.video_container').attr('src',src);
but i still haven't found a way for old embed videos
This is the resultant code after manipulating using js that doesn't work
<object width="320" height="240">
<param name="movie" value="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US&rel=0"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed src="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="320" height="240" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"/>
<param name="wmode" value="opaque"/>
</object>

just alter your iframe src like this
http://www.youtube.com/embed/UUeRCDyVspR2M?wmode=transparent
so the flashplayer served by google will render like you told em with that parameter :)
you simply have to add ?wmode=transparent to the params or do it like this
http://www.youtube.com/embed/UUeRCDyVspR2M?param1=bla&param2=foo&and_so_on=more&wmode=transparent
so you simply have to append
&wmode=transparent
to the end of the url

<script type="text/javascript">
var googleFooYou_tube = function(){
var objs = document.getElementsByTagName('object');
var length = objs.length;
for(var i=0; i<length; i++){
if(objs[i].className == 'video_container'){
var param = document.createElement('param');
param.name='wmode';
param.value='transparent';
var origEmbed = objs[i].getElementsByTagName('embed')[0];
var newEmbed = '<embed wmode="transparent" src="'+origEmbed.src+'" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true">';
objs[i].appendChild(param);
objs[i].removeChild(origEmbed);
objs[i].innerHTML=objs[i].innerHTML+newEmbed;
}
}
}
</script>
and your html code so far
<object width="425" height="349" class="video_container">
<embed src="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true"></embed>
<param name="movie" value="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
</embed>
</object>
<script>googleFooYou_tube();</script> // added this at the bottom of your page
It's not usuable as it is... I mean the function... but you can alter it for your needs... and make it look more appealing if you want. It is just a quick and dirty approach and it works flawlessly.

You should add a param for wmode in the flash element which will be an object tag in your markup. Try to find the object element and try this
$('object','.video_container').append(
$("<param/>").attr({
'name': 'wmode',
'value': 'opaque'
})
).find("embed").attr('wmode', 'opaque');

Javascript to flash via ExternalInterface

I'm wondering if someone could look over my code. I'm trying to pass a dummy variable from javascript to actionscript 3 with the following code:
HTML:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="music_player" width="500" height="375"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
<param name="movie" value="music_player.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="always" />
<embed src="music_player.swf" quality="high" bgcolor="#869ca7"
width="500" height="375" name="music_player" align="middle"
play="true" loop="false" quality="high" allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
Javascript:
var nextTrackLocation = "dummyString";
getFlashMovie("music_player").jsAlert(nextTrackLocation);
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName]; }
and the actionscript:
ExternalInterface.addCallback("getNextTrack", jsAlert);
function jsAlert(mess){
ExternalInterface.call("alert", mess);
}
Does anyone see a mistake?

Your question is very confusing. I think you are making two mistakes here.
From Javascript you're trying to call a function in Actionscript called "jsAlert" but the function is in Actionscript exposed as "getNextTrack". I think it should be:
getFlashMovie("music_player").getNextTrack(nextTrackLocation);
Second, where you define the function in Actionscript you overlooked that the ExternalInterface.addCallback actually takes three parameters.
ExternalInterface.addCallback("getNextTrack", null, jsAlert);