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

【问题标题】：Uncaught TypeError: undefined is not a function (on video pause function)Uncaught TypeError: undefined is not a function (on video pause function)
【发布时间】：2014-05-08 15:41:37
【问题描述】：

我正在尝试使用 jQuery 对象暂停视频，但收到一条错误消息：

Uncaught TypeError: undefined is not a function

代码如下：

    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");

任何机构都可以帮助我说出我做错了什么？？？

【问题讨论】：

首先创建一个对 DOM 元素 $player = myVideo.get(0); 的引用，然后尝试调用该元素的 jQuery 函数...
DOM 元素 !== jQuery 对象，它们有不同的 API。如果您尝试将其中一个用作另一个，则会出现错误。

标签： javascript jquery html function

【解决方案1】：

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

让我们考虑一下这些行。首先，我们有一个 jQuery 对象 (myVideo)。然后我们使用get(0) ($player) 获取本机 DOM 对象。然后我们尝试在原生 DOM 对象上调用 jQuery 函数 (attr)（这是发生错误的地方，因为原生 DOM 对象没有 attr 函数）。然后我们尝试使用原生的addEventListener 系统添加一个事件。

这一切似乎有点复杂，有点混乱。简单的解决方案就是在整个过程中使用 jQuery：

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

另一种选择是简单地使用 DOM：

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

【讨论】：

【解决方案2】：

这段代码

$player = myVideo.get(0);

给出真正的元素，而不是 jQuery 包装器。而attr是jQuery包装对象的一个方法。

如果你想获取 jQuery 对象的第一个元素，但仍将其包裹在 jQuery 中，你可以使用eq 而不是get：

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

注意，你必须得到真正的元素，或者使用on而不是addEventListener。

或者，您可以使用 vanilla-js 方式：

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

【讨论】：