|
JavaScript - Getting A Video Object's Width And Height
I have embeded a video like this:
Code: <div class="videoDiv" id="showDis"> <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="MediaPlayer1"> <param name="url" value="http://mysite/myvideo.wmv""> <param name="src" value="http://mysite/myvideo.wmv""> <param name="showcontrols" value="true"> <param name="autostart" value="true"> <!--[if !IE]>--> <object type="video/x-ms-wmv" data="http://mysite/myvideo.wmv""> <param name="src" value="http://mysite/myvideo.wmv""> <param name="autostart" value="true"> <param name="controller" value="true"> </object> <!--<![endif]--> </object> </div> I would like to retrieve the video's width and height (resolution), for example: 640x480 how can I do that via JavaScript? this is what I tried: Code: var objPlayer = document.MediaPlayer1;
alert(objPlayer.offsetWidth);
alert(objPlayer.width);
alert(document.getElementById('showDis').style.width);
alert(document.getElementById('showDis').style.offsetWidth);
nothing gives me the real value. even looked he http://msdn.microsoft.com/en-us/libr...(v=VS.85).aspx but couldn't find anything relevant Similar TutorialsHi I have embeded a video like this: Code: <div class="videoDiv" id="showDis"> <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="MediaPlayer1"> <param name="url" value="http://mysite/myvideo.wmv""> <param name="src" value="http://mysite/myvideo.wmv""> <param name="showcontrols" value="true"> <param name="autostart" value="true"> <!--[if !IE]>--> <object type="video/x-ms-wmv" data="http://mysite/myvideo.wmv""> <param name="src" value="http://mysite/myvideo.wmv""> <param name="autostart" value="true"> <param name="controller" value="true"> </object> <!--<![endif]--> </object> </div> I would like to retrieve the video's width and height (resolution), for example: 640x480 how can I do that via JavaScript? this is what I tried: Code: var objPlayer = document.MediaPlayer1;
alert(objPlayer.offsetWidth);
alert(objPlayer.width);
alert(document.getElementById('showDis').style.width);
alert(document.getElementById('showDis').style.offsetWidth);
nothing gives me the real value. even looked he http://msdn.microsoft.com/en-us/libr...(v=VS.85).aspx but couldn't find anything relevant im using a mootools popup box to play a youtube video its using javascript to control the "close" button.. and the close button uses this function Code: clickClose: function(){
$(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){
}).start(this.opacity,0); this.box.setStyle('display','none');
this.isVisible = false;
},
seeing as ow i have a playing video in the box...that simply wasnt enough..because the video would continue playing after the box is closed... (you would ehar audio) so i modified the code by adding Code: this.box.setStyle('display','none');
this did the TRICK!!! ....in firefox.....sadly Internet Explorer is refusing to destroy that video upon click.... are there any ideas as to how i can destroy that video across all browsers when that button is clicked....i say "destroy" because im mad! lol but i simply want the video to dissapear...off the screen and off the site with no mysterious audio afterwards. Hello I am in need of help desperatley. I am trying to get a video to launch from my homepage. see test homepage here http://www.nuviewinc.com/index3.html the video should pop up and play. Like it does here- http://www.nuviewinc.com/testv.html But it doesnt... can anyone help this poor marketing manager with coding? I simply followed the directions here http://www.vmatrixonline.com/vplayer...structions.pdf. all the code appears correct. Hello guys ! I'm fairly new to JavaScript, so this is maybe an obvious mistake, but here is the code that doesn't work, it goes inside the body of my document : Code: <script type="text/javascript">
aImg = new Image();
aImg.src = "myimage.jpg";
aHeight = aImg.height;
aWidth = aImg.width;
document.write(aHeight + "," + aWidth);
document.write("<img src=" + aImg.src + ">");
</script>
While the image is displayed, the value written for the height and width is "0". This code worked fine when I compiled it in the "Tryit Editor" of w3schools.com (I told you I was new to JS :P), but it fails when I insert it in a page and then view the page with Google Chrome or IE7. Of course this is not all fo the code, I intend to display the image differently depending of its size... but I need to get that part right before moving on Any help would be greatly apreciated, thanks ! Hi My html document contain many images which has the attribute src of img tag as the flowing : PHP Code: http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg?x=210&y=83&q=85&sig=Tua1ukyUEVKTPSsz7xGPsg-- All those images has the common source folder http://images.mysite.com/a/p This is an example : PHP Code: <img src = "http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg?x=210&y=83&q=85&sig=Tua1ukyUEVKTPSsz7xGPsg--" width = "105" height = "73" > I tried during many days to find the solution using RegExp but I didn't arrives. What I want to do is I - change for all image from the seem folder the src attribute to match the exact url of the image without special characters, for this example : PHP Code: http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg?x=210&y=83&q=85&sig=Tua1ukyUEVKTPSsz7xGPsg-- Became : PHP Code: http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg II - Control the width and height of the image by changing its height and width attributes resp. from two javascript variables : PHP Code: var v_width = 320 // Just for example var v_height = 250 // Just for example This is an example of try didn't work for me, for the first issue : PHP Code: var element = document.getElementsByTagName("img"); for(var i=0;i<element.length;) { var myString = new String(); var myRegExp = new RegExp("http:\/\/d\.images\.mysite\.com\/a\/p[^\?]*(jpg|png|gif)","i"); var myRegExp0 = new RegExp("\?.*","i"); myString = element[i].getAttribute("src"); if(myRegExp.test(myString)) { var newString = myString.replace(myRegExp0,""); element[i].setAttribute("src",newString); } } Help me please Think you Hi, well earlier i asked for a script which can load game which showing some banner until the game is loading and the load progress that it shows, it shouldn't be fake, many people said you need flash for it, but atlast i found a script that can do that for me. BUT there is a issue when i started using the script in the script the width and height can be in px like width 500 but it can't be made to width 100% when i make it 100% the script stops working. I can't use px or any other thing except 100% as i want the flash to increase its width and height with the change in screen resolution. Here is the script, you can make a demo html file out of it for testing purposes, if you don't want to make one i am ready to provide a demo page too, please leave a comment for it. Thank you ^_^ Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pre-roll Example page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://files.cryoffalcon.com/woro/preroll.dev.js"></script>
<style>
.gamecontent {width:923px;padding:0px;margin:0px auto 0px auto;background-color:#FFF;}
.gamecontent .gamewrapper {margin:0px auto 0px auto;}
.gamecontent .game {float:left;margin:0px auto 0px auto;padding:0px;overflow:hidden;width:1px;height:1px}
.gamecontent .ad {display:none;width:300px;height:300px;margin:0px auto 0px auto;padding:50px auto 0px auto;text-align:center;font-size:10px}
.gamecontent .ad #progress {width:200px;height:10px;margin:10px auto 0px auto;padding:0px;border:solid 1px #E7B9D1;text-align:left;}
.gamecontent .ad #pbar {width:0px;height:10px;background-color:#CCC;}
.gamecontent .ad #pskip {text-align:center;}
.medrectangle {width:300px;height:250px;border:none}
</style>
</head>
<body>
<div class="gamecontent">
<div class="gamewrapper" style="height:640px;width:640px;">
<div class="game" id="gameframe"></div>
<div id="adframe" class="ad">
<div>Advertisement</div>
<div id="plad"></div>
<div id="progress"></div>
</div>
<noscript>
<div>
<!--Game embed code should be placed here here-->
</div>
</noscript>
</div>
</div>
<script type="text/javascript" language="javascript">
var af = 'adframe';
var gf = 'gameframe';
var gid = 'gameswf';
var adinvoke = '<iframe class="medrectangle" src="<!--to show my logo or ad-->" scrolling="no"></iframe>';
function skipad() {
$('#plad').html('<div></div>');
$('#'+af).hide();
$('#'+gf).css('width','640px');
$('#'+gf).css('height','640px');
}
$('#gameframe').preloadad(
{ // calls the init method
swf : 'http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf',
width : 640,
height : 640,
gameid : gid,
gameframe : gf,
adframe : af,
adcode : adinvoke,
pltime : 10000,
gametype : 'swf',
base :'http://games.balloontowerdefense.net/b/',
skiptxt : 'Click here to show the game',
showad :'1'
});
</script>
</body>
</html>
in the above code the 640 width and height is the issue, as it doesn't work with 100% values, i was wondering how to make it work with 100% width and height. I don't know what did i miss or where did i go wrong? Hi guys, was just wondering if there was a way to control the page height and width using js/jquery? I have a page that is: width: 980px height: 2500px I would like the page height to be set to around 900px with the viewable scrollbar and all other content not viewable underneath. Any help is appreciated Cheers, paffley I am trying to customize this scrollbar so that it will fit all screen resolutions and I was wondering how I could do this by somehow customizing the JavaScript files created by Nathan Faubion or if I could do this using other JavaScript variables (var widthPercentage) to change the pixels to percentages? Please let me know what you think. Thank you very much! One of the pages on the website I'm using the JavaScript on: http://www.clintshipley.com/about.html Code: JavaScript file jsScroller.js:
//Created by Nathan Faubion http://www.n-son.com/scripts/jsScrolling/
function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("scroller-content") > -1) {
o = list[i];
}
}
//Private methods
this._setPos = function (x, y) {
if (x < this.viewableWidth - this.totalWidth)
x = this.viewableWidth - this.totalWidth;
if (x > 0) x = 0;
if (y < this.viewableHeight - this.totalHeight)
y = this.viewableHeight - this.totalHeight;
if (y > 0) y = 0;
this._x = x;
this._y = y;
with (o.style) {
left = this._x +"px";
top = this._y +"px";
}
};
//Public Methods
this.reset = function () {
this.content = o;
this.totalHeight = o.offsetHeight;
this.totalWidth = o.offsetWidth;
this._x = 0;
this._y = 0;
with (o.style) {
left = "0px";
top = "0px";
}
};
this.scrollBy = function (x, y) {
this._setPos(this._x + x, this._y + y);
};
this.scrollTo = function (x, y) {
this._setPos(-x, -y);
};
this.stopScroll = function () {
if (this.scrollTimer) window.clearInterval(this.scrollTimer);
};
this.startScroll = function (x, y) {
this.stopScroll();
this.scrollTimer = window.setInterval(
function(){ self.scrollBy(x, y); }, 40
);
};
this.swapContent = function (c, w, h) {
o = c;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("scroller-content") > -1) {
o = list[i];
}
}
if (w) this.viewableWidth = w;
if (h) this.viewableHeight = h;
this.reset();
};
//variables
this.content = o;
this.viewableWidth = w;
this.viewableHeight = h;
this.totalWidth = o.offsetWidth;
this.totalHeight = o.offsetHeight;
this.scrollTimer = null;
this.reset();
};
JavaScript on HTML page:
<script type="text/javascript" src="Scripts/jsScroller.js"></script>
<script type="text/javascript" src="Scripts/jsScrollbar.js"></script>
<script type="text/javascript">
var scroller = null;
var scrollbar = null;
window.onload = function () {
scroller = new jsScroller(document.getElementById("scroller"), 550, 275);
scrollbar = new jsScrollbar (document.getElementById("scrollbar-content"), scroller, false);
}
</script>
Hey guys i am test my page in IE8 and i have a small problem the following script works in other browsers but not IE8 Code: function preload(arrayOfImages)
{
$(arrayOfImages).each(function ()
{
$('<img />').attr('width', '100px').attr('height', '100px').attr('src',this).appendTo('#img').attr('class', 'img');
setTimeout(this, 2000);
});
}
when i run this with lets say 100 images and all the image sizes are all diffrent and above 150px*150px when this runs it will preload the images fine BUT it loads the images with their defualt width & height and not 100px*100px any idea why this is? Below are the full Javascript and HTML to detect a browser and either display HTML5 or Flash video. However, the script is returning an error, 'document.getElementById(...)' is null or not an object. Any suggestions? Code: var deviceAgent = navigator.userAgent.toLowerCase();
$brwzr = deviceAgent.match(/(chrome|firefox|safari|msie 9.0)/);
if ($brwzr) {
document.getElementById("video_5").setAttribute("class", "on");
}
else {
document.getElementById("video_F").setAttribute("class", "on");
}
Code: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video Switch</title>
<script language="JavaScript" src="index/js/detect.js"></script>
<style>
<!--
.off {
display: none;
}
.on {
display: inline;
}
-->
</style>
</head>
<body>
<div id="video_5" class="off">HTML5!</div>
<div id="video_F" class="off">Flash!</div>
</body>
</html>
Hi, I currently created a video uploader, but when the video is too big in size, the page seems to be not doing any until the video is completely uploaded. I want to put somewhat like "loading.. please wait" script until the video is not completely uploaded. Thanks. //Ana Hello, I run a online gaming website, and I'm having problems with certain websites iframing our games. Actually I'm ok with iframing, as long as they include the banner ad located just beneath our games. But often times unscrupulous webmasters will iframe only the game, preventing us from generating any revenue from the banner ad (and costing us additional bandwidth charges). I'm hoping to find a way to detect the dimensions of the iframe, so that I may dynamically resize the game, in order to include the banner ad within the iframe. Does anybody know how to extract the "height" and "width" attribute values from an <iframe> tag sitting on a different site? Regards, Steve Hi, every time I try and alert: [ { number:0, secondnumber:0 }, { number:2, secondnumber:1 }, { number:1, secondnumber:2 } ] it just shows [object object], [object object], [object object]. Why is this and what can I do to make the record be shown as it is above in an alert? Thanks. Hello, let me try to explain better what I'm trying to do. I'm a real newbie I don't know much javascript but I understand more or less the logic behind it... tell me if this solution should work and if you know how to do it please show me. I have this page. http://felixdeportu.com/5/ The images are inside a div#content div#photo. I need to make div#photo's width to match the total width measurement of all the images it contains. If you load the page and you don't touch the size, it will work fine... but that's not realistic. If I resize the page, which will happen often on this kind of page (I'm assuming), the whole thing goes haywire (try it, scroll to the last image and resize the page you'll see what I mean). What can I do? Is my idea the right solution? Am I not explaining this clearly enough? Let me know please, I'm desperate. I've been trying to get CSS to do this for me for 3 hours now. Nothing works... I can't get any info from Firebug except that one line, uncaught exception [object Object]. The code fully worked, then I needed to make it dynamically create Sortables from the scriptaculous library based on how many X were in a table in my database, which I've done, and I'm thinking it may be a simple slight parse error of some type, I'm not too good with Javascript, because now my script barely works. I've double checked the script's source code, the PHP variables are exactly what they should be. Code: print<<<HERE
Sortable.create('sortlist$box', { tag: 'img', overlap:'horizontal',constraint:false, containment: $list, dropOnEmpty: true,
onChange: function(item) {
var list = Sortable.options(item).element;
if(changeEffect) changeEffect.cancel();
changeEffect = new Effect.Highlight('changeNotification', {restoreColor:"transparent" });
},
onDrop: function(item) {
var thing=Sortable.options(item).element.identify();
var anchors = document.getElementById(thing).childNodes.length-2;
if(anchors > 20){
alert('This box had 20 creatures in it already, your last action has not been saved.');
window.location.reload();
}
else{
new Ajax.Request("saveImageOrder.php", {
method: "post",
parameters: { data: Sortable.serialize("sortlist$box") }
});
}
}
});
HERE;
$box++;
}
?>
});
</script>
if you solve this I'll send ya $10 via paypal I created a method for displaying an object's properties: Code: renderfunction = false;
function showProperty (object, property)
{
document.write ('<td class="type">' + (typeof object[property]) + '</td>'
+ '<td class="name">' + property + '</td>');
document.writeln('<td class="value">' +
(
(typeof object[property] != 'function')
? object[property]
:(
(property != 'showProperties')
? (
renderfunction
? object[property]()
: ('<span class="self">NOT RENDERED</span>')
)
: ('<span class="self">THIS</span>')
)
)
+ '</td>');
document.writeln('<td class="hasOwnProperty" >'
+ (
object.hasOwnProperty(property)
? "Local"
: "Inherited"
)
+ '</td>');
if (typeof object[property] == 'function')
{
document.writeln ('<td class="function">' + object[property] + '</td>');
}
else
{
document.writeln ('<td class="function"> </td>');
}
}
As long as renderfunction = false, the object is fine coming out of this function. However, if I change renderfunction to true, all my properties become undefined. Why isn't this working as I expect it to? How should I fix it? Thanks in advance, -Brian. I'm writing a program that involves a network of interconnected nodes (or simply objects in my example below). It depends on being able to access properties of an object's linked objects (a bit oddly worded, sorry)... Problem is I'm not sure how to properly access those properties... see below please. <script> //This is an example of a problem im having in my own code... //I want to access the name of the object within the links array wintin the object... var objA = {name: "Object A", links: [objB, objC]}; var objB = {name: "Object B", links: [objC, objD, objE]}; var objC = {name: "Object C", links: [objB]}; var objD = {name: "Object D", links: [objE]}; var objE = {name: "Object E", links: [objD]}; //ex: I want to access the name of Object A's first link... console.log(objA.links[0].name); </script> I'm hoping to get "Object B"... But instead I get: TypeError: Result of expression 'objA.links[0]' [undefined] is not an object. Is there another way around this? Any thoughts are appreciated. Hi all, I'm stumped on finding a way in javascript to create an object factory whose instances are also object factories. In short I want something like that below, but no joy ... any clues? Code: function createClass () {
return new createClass()
function createClass() {
return new createInstance ()
function createInstance () {
//Default properties, values and methods which might later be extended
}
}
}
var createDoor = createClass();
var door1 = createDoor();
var door2 = createDoor();
var createChair = createClass();
var chair1 = createChair ();
var chair2 = createChair ();
Hello together! I generate html code with jsp. In that jsp there a several framesets and frames. And yes i know, frames are not really up to date but it's an old program and i have to deal with it now. Anyway, in the top frameset i have an onload attribute like onload="load()". In the function load i want to access the Element.prototype object. But unfortunately typeof Element gives me "undefined". So i looked a little deeper and found that window.toString() gives me "[object]" and not as expected "[object window]" so somehow my window doesn't know that its construcor is Window. window.construcor is "undefined" as well. And i don't have access to the Element object. I really don't know where the error could be. When the page is loaded and i access the same window over the console, then everything is right. But in my function a can't get access to the objects i need. I also don't know what part of the code could be useful to post here, but maybe someone had a similar problem before? i should say that this problem only occurs in IE8. In IE9 it works perfectly. Has anyone any idea?? Ignore post (if mod, please delete)
|
|||||||