CODEWITHSUNDEEP
javascriptjqueryhtml5-video
Holly
Holly

Reputation: 7752

How to pass a variable outside a function

I'm trying to get the width of a video with jquery.

$(document).ready(function(){
    $("#hp-video-player").bind("loadedmetadata", function () {
        var vidWidth = this.videoWidth;
        var vidHeight = this.videoHeight;
        console.log('this is width ' + vidWidth);
        console.log('this is height ' + vidHeight);
    });
});

It works but if I try to access the vadWidth & videHeight outside of the function

 $(document).ready(function(){
        $("#hp-video-player").bind("loadedmetadata", function () {
            var vidWidth = this.videoWidth;
            var vidHeight = this.videoHeight;
        });

        console.log('this is width ' + vidWidth);
        console.log('this is height ' + vidHeight);
    });

Upvotes: 2

Views: 2167

Answers (5)

Myles B. Currie
Myles B. Currie

Reputation: 61

You need to declare the variables outside of the function so that their scope is wider. Below makes the variable scope to be within the jQuery $() function and not just the bind function. Its worth researching variable scope.

$(document).ready(function(){

    var vidWidth;
    var vidHeight;
    $("#hp-video-player").bind("loadedmetadata", function () {
        vidWidth = this.videoWidth;
        vidHeight = this.videoHeight;
    });

    console.log('this is width ' + vidWidth);
    console.log('this is height ' + vidHeight);
});

Upvotes: 0

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

declare the variable outside the function.

 $(document).ready(function(){
var vidHeight;
var vidWidth ;
        $("#hp-video-player").bind("loadedmetadata", function () {
             vidWidth = this.videoWidth;
           vidHeight = this.videoHeight;
        });

        console.log('this is width ' + vidWidth);
        console.log('this is height ' + vidHeight);
    });

Upvotes: 1

Ranjan Kumar
Ranjan Kumar

Reputation: 499

Try this: Declare a global object. Since you are observing loadedmetadata event, value will be assigned on this event. What you are trying id fetching the value before the event is fired. You should have an event "loadeddata" that should be fired when value are assinged to _dimension object.

var _dimension = { height : 0, width : 0 };  

$(document).ready(function(){
    $("#hp-video-player").bind("loadedmetadata", function () {
         _dimension.width = this.videoWidth;
         _dimension.height = this.videoWidth;
    });

     $("#hp-video-player").bind("loadeddata", function(){
    console.log('this is width ' + _dimension.width);
    console.log('this is height ' + _dimension.height);
    });
});

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can declare the variable globally and then print in console like below :

$(document).ready(function(){
    var vidWidth = "";
    var vidHeight = "";
    $("#hp-video-player").bind("loadedmetadata", function () {
         vidWidth = this.videoWidth;
         vidHeight = this.videoHeight;
    });

    console.log('this is width ' + vidWidth);
   console.log('this is height ' + vidHeight);
});

But this will print correct value only after loadedmetadata event fired for $("#hp-video-player") and in this case width and heights getting print in console before firing an event.

But if you want to print or use correct values outside function then do something like this :

 var vidWidth = "";
  var vidHeight = "";

  $(document).ready(function(){

        $("#hp-video-player").bind("loadedmetadata", function () {
             vidWidth = this.videoWidth;
             vidHeight = this.videoHeight;
        });
    });

   function printMetaData()
  {
    console.log('this is width ' + vidWidth);
    console.log('this is height ' + vidHeight);
    // you can do your desired task here.
   }

Upvotes: 0

Balachandran
Balachandran

Reputation: 9637

try this ..vidWidth ,vidHeight local variables only visible inside function only

move to outside of the function . 

     $(document).ready(function () {

     var vidWidth, vidHeight;

     $("#hp-video-player").bind("loadedmetadata", function () {
         vidWidth = this.videoWidth;
         vidHeight = this.videoHeight;
     });
     if (vidWidth != undefined) {
         console.log('this is width ' + vidWidth);
     }
     if (vidHeight != undefined) {
         console.log('this is height ' + vidHeight);
     }
 });

Upvotes: 0

Related Questions