I have an animation transparent flash file, this file should be full screen,
In this animation I have a bird which should fly from left to right, this action is on flash file and I published the flash file in transparent mode,
Now I should insert this SWF file on top of all layers.
I can do this by div and position but when I click everywhere of this page I will get default flash menu.
How can I limit the flash menu to just visible area ?
UPDATE:
I mean was full width,
the HTML code which Flash created for me is this :
<!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>Untitled-1</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; overflow:hidden; }
#flashContent { width:100%; height:100%; }
</style>
</head>
<body>
TEST
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1280" height="853" id="Untitled-1" align="middle">
<param name="movie" value="Untitled-1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="false" />
<param name="wmode" value="transparent" />
<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="Untitled-1.swf" width="1280" height="853">
<param name="movie" value="Untitled-1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="false" />
<param name="wmode" value="transparent" />
<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>
</body>
</html>
Well, I if you want your menu to be disabled then you can't do that wit html or js but you can do that in your flash file using actionscript like this:
Stage.showMenu=false;
Or you can disable right click on your webpage like this:
<script language="javascript">
document.onmousedown=disableclick;
function disableclick(e)
{
if(event.button==2)
{
return false;
}
}
</script>
AND
<body oncontextmenu="return false">
...
</body>
The problem is the Flash is tranparent , but it is on top of the HTML. Clicking will generate a click event on the Flash element, blocking the other things on your website.
With jQuery it's easy to get around this.
You will need to get the coördinates of the click event and then trigger a click on the page HTML element which has the same coördinates.
$('#flashContent').click(function(e){
evt = e || window.event;
// make flash disappear
$('#flashContent').hide();
// get element at point of click
starter = document.elementFromPoint(evt.clientX, evt.clientY);
// send click to element at finger point
$(starter).click();
// bring back the flash
$('#flashContent').show();
});
This will work in most cases. Remember to include the jQuery library in the headsection and wrap this function within document.ready function if you aren't using jQuery allready.
Note: For right clicking you should make a similar function to this one. Instead it will listen for a right click event.
Hope it helped you out.
Related
I need to control the play and pause of video element in my website. The significant part of the html is given below.
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="800" height="515">
<param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
<param name="src" value="http://lms.alefeducation.com/pluginfile.php/886/mod_lesson/page_contents/506/6N1.1%20Intro%20Video.mp4" />
<param name="controller" value="true" />
<param name="loop" value="false" />
<param name="autoplay" value="false" />
<param name="autostart" value="false" />
<param name="scale" value="aspect" />
<!--[if !IE]>-->
<object data="http://lms.alefeducation.com/pluginfile.php/886/mod_lesson/page_contents/506/6N1.1%20Intro%20Video.mp4" type="video/mp4" width="800" height="515">
<param name="src" value="http://lms.alefeducation.com/pluginfile.php/886/mod_lesson/page_contents/506/6N1.1%20Intro%20Video.mp4" />
<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
<param name="controller" value="true" />
<param name="loop" value="false" />
<param name="autoplay" value="false" />
<param name="autostart" value="false" />
<param name="scale" value="aspect" />
<!--<![endif]-->
<span class="mediaplugin mediaplugin_html5video">
<video controls="true" width="800" height="500" preload="metadata" title="6N1.1 Intro Video.mp4">
<source src="http://lms.alefeducation.com/pluginfile.php/886/mod_lesson/page_contents/506/6N1.1%20Intro%20Video.mp4" type="video/mp4"></source>
<a class="mediafallbacklink" href="http://lms.alefeducation.com/pluginfile.php/886/mod_lesson/page_contents/506/6N1.1%20Intro%20Video.mp4">6N1.1%20Intro%20Video.mp4</a>
</video>
</span>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</span><br></p>
Now I am trying to control the video with the following code
var videos = document.querySelectorAll('video');
for(i=0;i<videos.length;i++) {
videos[i].id = 'video-'+i;
}
$(document).ready(function () {
var interval = self.setInterval(function(){LoopForever()},1000);
var video0 = document.getElementById('video-0');
function LoopForever() {
$.ajax({url:"http://localhost/StudentState.php",
headers: {
'Access-Control-Allow-Origin': '*'
},
success:function(data){
var video0 = document.getElementById('video-0');
if(video0.ended == false){
if(data >0){
video0.play();
} else{
video0.pause();
}
}
}
})
}
});
But what happens that two video objects are created. And from the javascript code above, only the newly created object is being controlled, not the object being shown in the browser.
Do anyone have answer to this???
Update
The complete code goes here:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<p><span class="mediaplugin mediaplugin_qt">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="800" height="515">
<param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
<param name="src" value="Area_of_irregular_shape.mp4" />
<param name="controller" value="true" />
<param name="loop" value="false" />
<param name="autoplay" value="false" />
<param name="autostart" value="false" />
<param name="scale" value="aspect" />
<!--[if !IE]>-->
<object data="Area_of_irregular_shape.mp4" type="video/mp4" width="800" height="515">
<param name="src" value="Area_of_irregular_shape.mp4" />
<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
<param name="controller" value="true" />
<param name="loop" value="false" />
<param name="autoplay" value="false" />
<param name="autostart" value="false" />
<param name="scale" value="aspect" />
<!--<![endif]-->
<span class="mediaplugin mediaplugin_html5video">
<video controls="true" width="800" height="500" preload="metadata">
<source src="Area_of_irregular_shape.mp4" type="video/mp4"></source>
</video>
</span>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</span><br></p>
<script>
var videos = document.querySelectorAll('video');
for(i=0;i<videos.length;i++) {
videos[i].id = 'video-'+i;
}
$(document).ready(function () {
var interval = self.setInterval(function(){LoopForever()},1000);
var video0 = document.getElementById('video-0');
function LoopForever() {
$.ajax({url:"http://localhost/StudentState.php",
headers: {
'Access-Control-Allow-Origin': '*'
},
success:function(data){
var video0 = document.getElementById('video-0');
if(video0.ended == false){
if(data >0){
video0.play();
} else{
video0.pause();
}
}
}
})
}
});
</script>
</body>a
</html>
Now if I debug it in chrome, it is replicated.
I understood the problem and got a hack around it.
The inner object has a type video/mp4. So browser was rendering it as a video. And javascript code was just identifying it as an object. When trying to get video object through code, the script was giving reference to the code in video tag. So, two instances of the same video has been created. And through javascript, only the second video could be controlled.
Now here I got the hack. I won't say it is a standard solution. But its a way around the problem.
I got reference to the video element and appended it to the outer object. Now I removed the inner object.
So, the new video got rendered and now I have controls of the video through javascript.
Here goes the relevant code.
var objects = document.getElementsByTagName('object');
var video = objects[1].lastElementChild.firstChild.nextElementSibling;
var object0 = objects[0];
object0.appendChild(video);
object0.removeChild(object0.childNodes[17]);
var video = object0.lastChild;
I have Orekaweb a audio recorder. It runs on Apache tomcat. What it does is it records all calls on VOIP network and provides a easy access to view them on web browser.
The issue is the recorded calls are in WAV format and it works perfect in IE. the codes are.
<td colspan="2">
<script language="JavaScript">
function play (audioFilename)
{
document.all.player.autoStart = true;
document.all.player.fileName = audioFilename;
}
</script>
<OBJECT ID="player"
CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/
en/nsmp2inf.cab#Version=5,1,52,701"
STANDBY="Loading Microsoft Windows Media Player components..."
TYPE="application/x-oleobject"
WIDTH=280 HEIGHT=50 >
<PARAM NAME="fileName" VALUE="">
<PARAM NAME="animationatStart" VALUE="false">
<PARAM NAME="transparentatStart" VALUE="true">
<PARAM NAME="showControls" VALUE="true">
<PARAM NAME="ShowStatusBar" VALUE="true">
<PARAM NAME="ShowDisplay" VALUE="false">
<PARAM NAME="ShowPositionControls" VALUE="true">
<PARAM NAME="ShowTracker" VALUE="true">
<PARAM NAME="CurrentPosition" VALUE="0">
<PARAM NAME="autoStart" VALUE="true">
</OBJECT>
The audio play back function is not playing on Google chrome or other browsers.
So i thought of adding up inbuilt webkit player.
I added up the codes its below.
<td colspan="2">
<script language="JavaScript">
function play (audioFilename)
{
document.all.player.autoStart = true;
document.all.player.fileName = audioFilename;
}
</script>
<audio width="280" height="50" controls="controls" src="audiofileName" >
<object width="280" height="50" type="audio/x-wav" data="audiofileName">
<PARAM NAME="fileName" VALUE="">
<!-- Image as a last resort -->
</object>
</audio>
I see the player, but its playing.
Can anyone help me in this regards.
Stephen Paulraj
I have published my flash file to a html page. How would I automatically close this page once the flash animation ends. I can tell flash via actionscript to stop, but I need the whole page to automatically close.
Just tried to use javascript to tell website to close after 5 seconds (time of animation). Didn't want to work. Time of close does NOT matter just as long as it closes after animation. Here is code:
<html>
<head>
<meta charset="UTF-8">
<title>Splashload</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>
<script>
function loaded()
{
window.setTimeout(CloseMe, 500);
}
function CloseMe()
{
window.close();
}
</script>
<body>
<div align="center" id="flashContent">
<object type="application/x-shockwave-flash" data="Splashload.swf" width="766" height="750" id="Splashload" style="float: none; vertical-align:middle">
<param name="movie" value="Splashload.swf" onLoad="loaded()" />
<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="sameDomain" />
<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>
</body>
</html>
For testing purposes, here is the SWF fie
http://www.megafileupload.com/en/file/512654/Splashload-swf.html
You can call CloseMe function via ExternalInterface.call(functionName, param); when animation is complete
I'm trying to extract javascript code from a textarea here is my code:
def getCode(self,request):
#print "Extracting URL: " + request
opener = self.login(self.username,self.password)
html = etree.HTML(opener.open(request).read())
textarea = html.xpath('//*[#id="codeText"]/text()')
for code in textarea:
return code
This is the html code I'm trying extract from:
<textarea onclick="javascript: this.select();" id="codeText" style="height: 300px;width:500px;"> <!-- Clickon Affiliate code start here -->
<object type="application/x-shockwave-flash" data="http://banners.clickon.co.il/LOVELY2_banners/swf/JWFLZxzNxjclWGP.swf?url=http://track.clickon.co.il/click/Q8uTE8BXZz1pskj/JWFLZxzNxjclWGP/TsQ8uTE8BXZz1pskjtS" width="728" height="90">
<param name="movie" value="http://banners.clickon.co.il/LOVELY2_banners/swf/JWFLZxzNxjclWGP.swf?url=http://track.clickon.co.il/click/Q8uTE8BXZz1pskj/JWFLZxzNxjclWGP/TsQ8uTE8BXZz1pskjtS" />
<param name="scale" value="exactfit" />
<param name="wmode" value="transparent" />
</object>
<img alt="" style="visibility: hidden;" src="http://track.clickon.co.il/imp/Q8uTE8BXZz1pskj/JWFLZxzNxjclWGP/TsQ8uTE8BXZz1pskjtS" />
</textarea>
if the textarea contain only links or a text my getCode function working great, but if it contains java script code I cant extract it.
Can you help me ?
Thanks,
Yaniv.
In the code, for loop return too early; return only the first text.
If you want all the tags and text, try following.
import lxml.etree as etree
htmlchunk = '''
<textarea onclick="javascript: this.select();" id="codeText" style="height: 300px;width:500px;"> <!-- Clickon Affiliate code start here -->
<object type="application/x-shockwave-flash" data="http://banners.clickon.co.il/LOVELY2_banners/swf/JWFLZxzNxjclWGP.swf?url=http://track.clickon.co.il/click/Q8uTE8BXZz1pskj/JWFLZxzNxjclWGP/TsQ8uTE8BXZz1pskjtS" width="728" height="90">
<param name="movie" value="http://banners.clickon.co.il/LOVELY2_banners/swf/JWFLZxzNxjclWGP.swf?url=http://track.clickon.co.il/click/Q8uTE8BXZz1pskj/JWFLZxzNxjclWGP/TsQ8uTE8BXZz1pskjtS" />
<param name="scale" value="exactfit" />
<param name="wmode" value="transparent" />
</object>
<img alt="" style="visibility: hidden;" src="http://track.clickon.co.il/imp/Q8uTE8BXZz1pskj/JWFLZxzNxjclWGP/TsQ8uTE8BXZz1pskjtS" />
</textarea>
'''
html = etree.HTML(htmlchunk)
textarea, = html.xpath('//*[#id="codeText"]')
print(textarea.text + ''.join(etree.tostring(code) for code in textarea) + textarea.tail)
output:
<!-- Clickon Affiliate code start here -->
<object type="application/x-shockwave-flash" data="http://banners.clickon.co.il/LOVELY2_banners/swf/JWFLZxzNxjclWGP.swf?url=http://track.clickon.co.il/click/Q8uTE8BXZz1pskj/JWFLZxzNxjclWGP/TsQ8uTE8BXZz1pskjtS" width="728" height="90">
<param name="movie" value="http://banners.clickon.co.il/LOVELY2_banners/swf/JWFLZxzNxjclWGP.swf?url=http://track.clickon.co.il/click/Q8uTE8BXZz1pskj/JWFLZxzNxjclWGP/TsQ8uTE8BXZz1pskjtS"/>
<param name="scale" value="exactfit"/>
<param name="wmode" value="transparent"/>
</object>
<img alt="" style="visibility: hidden;" src="http://track.clickon.co.il/imp/Q8uTE8BXZz1pskj/JWFLZxzNxjclWGP/TsQ8uTE8BXZz1pskjtS"/>
I made a progress bar for .swf.
Code in <head>:
function ProgressBar(){
setTimeout(function (){
if (swfobject.getObjectById("Object").IsPlaying()) {
var TotalFrames = swfobject.getObjectById("Object").TotalFrames();
console.log(console.log("TotalFrames: " + TotalFrames));
var TCurrentFrame = swfobject.getObjectById("Object").CurrentFrame;
console.log(TCurrentFrame);
}
}, 200);
}
Code in <body>:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="600" id="Object">
<param name="movie" value="./Flash.swf">
<param name="wmode" value="transparent">
<param name="loop" value="false">
<param name="play" value="false">
<param name="quality" value="high">
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="./Flash.swf" width="600" height="600" id="Object">
<param name="wmode" value="transparent">
<param name="loop" value="false">
<param name="play" value="false">
<param name="quality" value="high">
</object>
<!--<![endif]-->
</object>
jQuery:
$("#button").on("click", function(){
ProgressBar();
})
I want the output TotalFrame and CurrentFrame, but the function SetInterval shows the result only once.
Output in console log:
TotalFrames: 745
undefined
102
How do I write this? What is the error?
Perhaps because you aren't using setInterval like in your question's title but setTimeout in your code ;)
Your ProgressBar function is using setTimeout(), not setInterval(). setTimeout() only fires the timeout once.