We Keep Coding

Flash Pro CS6 SWF animation doesn't loop with Java Script

I'm trying to play in Full Screen an SWF Flash file created in Flash Pro CS6. It plays fine in full screen. I'm still working on the details but the fact is that it doesn't loop and I need it to loop. On Flash the settings for the SWF was set to Loop but even inside Flash doesn't loop at all and I added to the timeline: stop(); so it will stop and loop at the end.
In Flash I imported my FLV file into the stage to load the external file instead of adding it to the time line because is a 35Mb video. The publishing settings for HTML has the loop option active and even on the code the Param value loop = true.
I'm really frustrated with this if you have any thoughts will be very appreciated.
Thanks in advance.
This is my code on HTML that will have my index page.
<div id="bg">
<script type="text/javascript">
var flashvars = {
myFile: "AuroraBoreal.swf",
myFileType: "flash",
loadEffect: "PixelDissolve" \\ kind of not working effect
};
var params = {
id: "bg",
name: "bg",
wmode: "transparent",
menu: "false"
};
var attributes = {
id: "bg",
name: "bg",
wmode: "transparent",
menu: "false"
};
swfobject.embedSWF("AuroraBoreal.swf", "bg", "100%", "100%", "10.0.45.2","expressInstall.swf", flashvars, params, attributes);
</script>
</div>

Try to embed it like this. See if something changes.
<div id="bg">
<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="100%" HEIGHT="100%">
<PARAM NAME="movie" VALUE="AuroraBoreal.swf">
<PARAM NAME="quality" VALUE="high">
<PARAM name="wmode" value="transparent">
<PARAM NAME="loop" VALUE="true">
<EMBED src="AuroraBoreal.swf" wmode="transparent" loop="true" quality="high" WIDTH="100%" HEIGHT="100%" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>
</div>

html code inside javascript function divxwebplayer

I have one website that contains database of movies (like IMDB). I would like when user click on movie cover (image) a window of divxwebplayer to open and play avi file from server. I have try but no success.
inside img tag a i have added onclick function that calls showmyvideo(). then i write function showmyvideo() { } but i don't know how to write html code inside javascript function to be executed. here is my html code that needs to be executed inside showmyvideo() function:
<object classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616" width="320" height="260" codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab">
<param name="custommode" value="none" />
<param name="autoPlay" value="false" />
<param name="src" value="film.avi" />
<embed type="video/divx" src="<?php echo $moviename ?>.avi" custommode="none" width="320" height="260" autoPlay="false" pluginspage="http://go.divx.com/plugin/download/"></embed>
Many Thanks.
i wouldlike when user click on image that divxweb player is openede on the screen and play avi file.
this is code that i im trying and traying but no go.please if some one can help me.
<!-- DivX Web Player -->
<a onClick="DivXWebPlayer('<?php echo $title; ?>', '<?php echo $year; ?>')" class="item-image">
function DivXWebPlayer(title, year)
{
$.ajax({
url: 'http://<?php echo $source; ?>/player.php?title='+title+'&year='+year,
success: function(data) {
$('#popup2').html('<div>' + data + '</div>');
},
error: function(request, error, errormessage) {
$("#messages").html(error + '\n' + errormessage);
}
});
e.preventdefault();
return false;
};
and a file player.php
<?php
/* get movie location */
$tit = $_GET['title'];
$yer = $_GET['year'];
$gen = $_GET['genre'];
?>
<div>
<object classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616" width="320" height="260" codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab">
<param name="src" value="movie.divx"/>
<embed
type="video/divx"
src="./Drama/<?php echo $tit; ?> [<?php echo $yer; ?>].avi"
width="320" height="260"
pluginspage="http://go.divx.com/plugin/download/">
</embed>
</object>
</div>
any help welcome..where i was doing wrong?

You should use innerHTML.
Declare a element somewhere in your web page and keep the an id for ex, "demo". Something like:
<div id="demo">
</div>
Then, in the javascript function, do this:
function showmyvideo()
{
document.getElementById("demo").innerHTML="yourhtmlcode";
}

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');

JS + HTML, get src using javascript

lets say I have an image being displayed using the code:
<img src="image.png"/>
I would like to define the src using javascript, how would you do something like
<script>
function getImage ()
{
return "image.png";
}
</script>
<img src="Javascript:getImage()"/>
UPDATE:
I need it to work with the divx player, getting the video url paramater via javascript
<object classid="clsid:*************" width="320" height="260" codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab">
<param name="custommode" value="none" />
<param name="autoPlay" value="true" />
<param name="src" value="Javascript:GetURL()" />
<embed type="video/divx" src="Javascript:GetURL()" custommode="none" width="850" height="400" autoPlay="true" pluginspage="http://go.divx.com/plugin/download/">
</embed>
</object>
anyone have any ideas for this?

You should give your tags individual IDs, then do
src = 'image.png';
document.getElementById('param1').setAttribute('value', src);
document.getElementById('embed1').setAttribute('src', src);
<param id="param1" name="src" value="Javascript:GetURL()" />
<embed id="embed1" type="video/divx" src="Javascript:GetURL()" custommode="none" width="850" height="400" autoPlay="true" pluginspage="http://go.divx.com/plugin/download/">

You have to assign the image an ID, then use this:
document.getElementById('img_id').src="new_image.jpg";

You can dynamically write in the embed code with the video URL with document.write(), but you should only do this when the page loads.

jquery to change swf

I want to be able to change the swf file showing on a page using the code below (with the comment turned into real code)
Is this possible??
jquery:
$("div.360container > p").click( function() {
// show different swf by changing the value of the first param and src of the embed
});
html:
<div class="mycontainer" style='padding:2px;'>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="650" height="350">
<param name="movie" value="/mySwf.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed src="/mySwf.swf" quality="high" wmode="opaque" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="650" height="350"></embed>
</object>
<p>click to change...</p>
</div>

Most reliable way to do that would be to set innerHTML of the element to your HTML. So, using jquery:
$("div.360container > p").click( function() {
// show different swf by changing the value of the first param and src of the embed
$(".mycontainer").html("<object ....><param name='movie' value='" + movieUrl + "' />....");
});