CODEWITHSUNDEEP
javascriptjqueryhtmlfunction
Phixin Equis
Phixin Equis

Reputation: 53

Uncaught TypeError: undefined is not a function (on video pause function)

I am trying to pause a videos whith jQuery Object and have been getting an error that says:

Uncaught TypeError: undefined is not a function

Heres de code:

    function daVideos(myVideo, arrPause, _src)
    {
         $player = myVideo.get(0);
         $player.attr('src', _src);
         $player.addEventListener("timeupdate", function(event)
         {
              var isPause = false;

              for(var i=0; i<arrPause.lenght; i++)
              {

                    if($player.currentTime >= arrPause[i]  && !isPause)
                    {
                        isPause = true;
                        $player.pause();

                    }
              } 
         });
    }

     var arr1 = [2,4];
     daVideos($("#video"), arr1, "video/sintel_trailer-1080p.mp4");

Any body can help me saying what im doing wrong???

Upvotes: 0

Views: 4410

Answers (2)

Oriol
Oriol

Reputation: 287950

This code

$player = myVideo.get(0);

gives the real element, not the jQuery wrapper. And attr is a method of jQuery wrapper objects.

If you want to get the first element of the jQuery object, but still have it wrapped in jQuery, you can use eq instead of get:

$player = myVideo.eq(0);
$player.attr('src', _src);

Note then you must get the real element, or use on instead of addEventListener.

Alternatively, you can do it the vanilla-js way:

$player = myVideo.get(0);
$player.setAttribute('src', _src);

Upvotes: 0

lonesomeday
lonesomeday

Reputation: 237817

$player = myVideo.get(0);
$player.attr('src', _src);
$player.addEventListener("timeupdate", function(event)

Let's think about these lines. To start with, we have a jQuery object (myVideo). We then get the native DOM object with get(0) ($player). We then attempt to call a jQuery function (attr) on the native DOM object (this is where the error occurs, because a native DOM object doesn't have an attr function). We then try to add an event using the native addEventListener system.

This all seems a bit complicated and a bit confused. The simple solution is simply to use jQuery throughout:

var $player = myVideo.get(0); // keep for later, note we're using var
myVideo.attr('src', _src);
myVideo.on('timeupdate', function(event)

The other alternative is simply to use the DOM:

var $player = myVideo.get(0); // note that we're using var again
$player.src = _src;
$player.addEventListener("timeupdate", function(event)

Upvotes: 2

Related Questions