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.
Related
I am trying to print the my whole website, normally the background turns white which is good, but i cant get the background color of an element to change to white to save ink.
This is the code
<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="900" height="700" id="Kirchhoff" align="middle">
<param name="movie" value="Kirchoff.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="bgcolor" value="#ffffff">
<embed src="Kirchhoff.swf" quality="high" bgcolor="#DDB85F" width="900" height="700" name="Kirchhoff" align="middle" allowScriptAccess="sameDomain" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="opaque" />
<br>
and this it the print code so far
SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form> '
+ '<input type=button name=print value="Imprimir" '
+ 'onClick="javascript:window.print()"></form>');
}
</script>
You should do this with CSS, not JavaScript.
#media print{
.element {
background-color: white;
}
}
#JoshSpears this would be the new one
<link rel="stylesheet" href="styles.css">
</head>
<body bgcolor="#7CF8EC">
<br>
<br>
<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="900" height="700" id="Kirchhoff" align="middle">
<param name="movie" value="Kirchoff.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="bgcolor" value="#ffffff">
<embed src="Kirchhoff.swf" quality="high" bgcolor="#DDB85F" width="900" height="700" name="Kirchhoff" align="middle" allowScriptAccess="sameDomain" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="opaque" />
<br>
<center><SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form> '
+ '<input type=button name=print value="Imprimir" '
+ 'onClick="javascript:window.print()"></form>');
}
</script>
</center>
</body>
</html>
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;
Am working on a flash slider.I have 2 images embeded in it.. is it possible to click on the images and load a new html page?Here is my code:
<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="308" height="118" title="location">
<param name="movie" value="<?=base_url()?>flash/home/locationsliders.swf">
<param name="quality" value="high">
<embed src="<?=base_url()?>flash/home/locationsliders.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="308" height="118" ></embed>
</object>
<script type="text/javascript">
AC_FL_RunContent('codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','308','height',
'118','title','location','src',
'<=base_url()>flash/home/locationsliders',
'quality','high','pluginspage',
'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash',
'movie','<?=base_url()?>flash/home/locationsliders' ); //end AC code
</script>
I was trying to use the onStateChange property of Youtube videos, And I could not get it to work. I searched a lot over it but could not really understand how it works. Here is the code which I tried, I added a console.log, which does not get called. Can someone help me?
This is my code:
<script type="text/javascript">
function onYouTubePlayerReady(playerId) {
var player = document.getElementById("YTplayer");
player.addEventListener("onStateChange", "onplayerStateChange");
}
function onplayerStateChange(newState) {
console.log('test');
}
</script>
<object style="height: 390px; width: 640px">
<param name="movie" value="http://www.youtube.com/v/u1zgFlCw8Aw?version=3">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed
src="http://www.youtube.com/v/u1zgFlCw8Aw?version=3"
type="application/x-shockwave-flash"
allowfullscreen="true"
allowScriptAccess="always"
width="640" height="390"
id="YTplayer">
</object>
You must define the id in playerapiid pramameter or use the given one in the onYouTubePlayerReady callback
<object style="height: 390px; width: 640px">
<param name="movie" value="http://www.youtube.com/v/u1zgFlCw8Aw?version=3&playerapiid=YTplayer">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed
src="http://www.youtube.com/v/u1zgFlCw8Aw?version=3&playerapiid=YTplayer"
type="application/x-shockwave-flash"
allowfullscreen="true"
allowScriptAccess="always"
width="640" height="390"
id="YTplayer" />
</object>
I am trying to call a Jscript function from a flash object. I want the function to be called when the animation ends.
Here is the embed code
<h1 align="center">
<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="360" HEIGHT="250" id="Yourfilename" ALIGN="center">
<PARAM NAME=movie VALUE="newbanner.swf">
<PARAM NAME=quality VALUE=high/><param name="LOOP" value="false" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="transparent">
<param name="bgcolor" value="#FFFFFF">
<EMBED src="newbanner.swf" quality="high" bgcolor="#FFFFFF"
WIDTH="360" HEIGHT="250" loop="false" NAME="newbanner.swf" ALIGN=""
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
</h1>
here is the jScript function i want to call:
<script language="javascript">
function mainFunction() {
var mydiv = document.getElementById('content');
mydiv.innerHTML = "hello";
}
</script>
here is the action code I add to the last frame of the flash object
URLLoader("javascript:mainFunction();");
The object loads but the function is not called. I can call the function other ways such as using an "onclick = mainFunction()" event on a button for example. Where am i going wrong?
thanks in advance.
Why don't you use flash.external.ExternalInterface.call ?