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¶m2=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');
Related
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;
}
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>
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.
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 + "' />....");
});
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);