Video.js: Uncaught TypeError: videojs is not a function error in 5.0, autoSetup

Created on 20 Jul 2015 · 17Comments · Source: videojs/video.js

I continue to get this message - I am using rc_2, 5.0.

It does not seem to affect anything - people I have shown it to believe it is a timing issue.

video.js:9407 Uncaught TypeError: videojs is not a function

In chrome browser, clicking on the error in output window takes one to line 9407 --, which is :+1: var player = videojs(mediaEl);

From the code:

// Check if any media elements exist
  if (mediaEls && mediaEls.length > 0) {

    for (var i = 0, e = mediaEls.length; i < e; i++) {
      var mediaEl = mediaEls[i];

      // Check if element exists, has getAttribute func.
      // IE seems to consider typeof el.getAttribute == 'object' instead of 'function' like expected, at least when loading the player immediately.
      if (mediaEl && mediaEl.getAttribute) {

        // Make sure this player hasn't already been set up.
        if (mediaEl.player === undefined) {
          var options = mediaEl.getAttribute('data-setup');

          // Check if data-setup attr exists.
          // We only auto-setup if they've added the data-setup attr.
          if (options !== null) {
            // Create new video.js instance.
line 9407 ----->>>>            var player = videojs(mediaEl);
          }
        }

more info reduced test case

Source

lomok

Most helpful comment

My personal workaround, in the video.js file, remove:

// l. 11283
var videojs = undefined; // remove this line

and

// l. 11344
var autoSetupTimeout = function autoSetupTimeout(wait, vjs) {
  videojs = vjs; // remove this line
  setTimeout(autoSetup, wait);
};

Since videojs is already defined in the file, and not defined again after manually set it to undefined for ie8 fix. Not sure to understand all the issues of this bug, and don't have time too, but may be the beginning of a solution.

grebett on 26 Oct 2015

👍4 🎉1

All 17 comments

This one should be fixed in the latest 5.0 RC. Let me know if you find differently.

heff on 15 Sep 2015

Hi,

I get this message with the current 5.0.0 in Firefox (https://github.com/videojs/video.js/releases/tag/v5.0.0).
The error log points to these lines:

    // Check if data-setup attr exists.
    // We only auto-setup if they've added the data-setup attr.
    if (options !== null) {
        // Create new video.js instance.
        var player = videojs(mediaEl);
    }

Video plays and everything seems to work fine. However as we log client side js errors to our server through an API ( we want to notice if things are not working well ) this generates a whole lot of error messages.
My current work-around is to remove the empty data-setup attribute.
Claus

clauso on 11 Oct 2015

My personal workaround, in the video.js file, remove:

// l. 11283
var videojs = undefined; // remove this line

and

// l. 11344
var autoSetupTimeout = function autoSetupTimeout(wait, vjs) {
  videojs = vjs; // remove this line
  setTimeout(autoSetup, wait);
};

grebett on 26 Oct 2015

👍4 🎉1

my workaround: change

      if (options !== '{}' && options !== null) {                   //  @@ if (options !== null) {
        // Create new video.js instance.
        var player = videojs(mediaEl);
       }

yairpe on 3 Nov 2015

👍1

Does it still happen with the latest videojs release (5.0.2 or next release 5.1.0)?
Would someone be able to put up a reduced test case that makes this error happen? I have not been able to reproduce.

gkatsev on 3 Nov 2015

I have just upgraded to 5.1.0 from 4.12.5 and the problem showed up.

yairpe on 4 Nov 2015

I upgraded from 4.11.2 to 5.2.0 and and the problem showed up.

ghost on 16 Nov 2015

Reopening since @webDevRN is still seeing this issue. Would you have to have a reduced test case?

gkatsev on 16 Nov 2015

Hi everyone!

I suspect that this has to do with jQuery. On my page, when I load video.js and then jQuery, I get the same error. When I FIRST load jQuery and THEN video.js, everything works fine.

So this is the setup that generates the problem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <link href="http://vjs.zencdn.net/5.2.1/video-js.css" rel="stylesheet">

  <script src="http://vjs.zencdn.net/5.2.1/video.js"></script> 
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.3.js'></script>

</head>

<body>
  <video id="example_video_1" class="video-js vjs-default-skin"
           controls preload="auto" width="640" height="320"
           poster="http://video-js.zencoder.com/oceans-clip.png"
           data-setup='{ "autoplay": true, "controlBar": {"fullscreenToggle": false, "progressControl": true}}'>
        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
        <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
        <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
    </video>
</body>
</html>

Unfortunately, when I use the hosted jQuery, I can't reproduce the error consistently. When I load over the cache (CTRL + F5) I can only reproduce the error about 1 in 10 times. If I use the script hosted in my development site, I get it 4 out of 5 times. For the next 2 weeks or so you can test with my page:

<script type='text/javascript' src='http://46.101.144.93/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>

After that, I will shutdown this VM but I hope you can reproduce it yourself.

Best regards,
Georg

DonDozone on 20 Nov 2015

Please check setup.js. In function autoSetupTimeout, videojs is initialized before autoSetup is called.
But sometimes autoSetup is called anonymously. Then the error is thrown.

deidei on 2 Dec 2015

I think you can use setTimeout to wait the videojs is initialized. Or delete attribute data-setup of video tag in html. and initiate the video player in js.

deidei on 2 Dec 2015

script defer="defer" src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js
script defer="defer" src="http://vjs.zencdn.net/5.4.4/video.js

this worked for me

peterhrdy on 18 Jan 2016

Consistently getting the same error on iPhone with just updated version 5.8.7. Surprisingly iPad and desktop browsers works fine...

ybozhko on 30 Mar 2016

My bug report seems to be the same issue but I only experience it on IE8 when I use data-setup="{}" (doesn't have to be empty) rather than javascript initialization and if I have the meta charset="utf-8" tag in my document. I tested on IE11, Firefox 45, and iPhone 9.3 and they work as expected.

Start by first clearing your cache whenever you visit the page to test. When you visit it in IE8 you get the error message. If you refresh the page, usually once but sometimes it takes 2 refreshes, you'll get the play button but missing the play triangle (utf8 issue) but if you mouse over the play button it appears correctly. The video will then play fine too. It does seem to be a timing issue but the utf8 part must be part of it somehow.

Here's my minimal test case: http://ivcmiami.com/test/

sethborg on 30 Mar 2016

@sethborg thanks for the example. Definitely not showing video-js on iPhone 6 Plus. I can see a native media player, but also there is no error.

ybozhko on 30 Mar 2016

Pretty sure you're never going to see videojs controls on iPhone. I don't see them on videojs.com. I just included the test cause someone mentioned it not playing videos on iPhone for them.

sethborg on 30 Mar 2016

@grebett solution works