video.min.js errors in IE8, must use video.js #3064

sethborg · 2016-02-02T17:01:39Z

Something's busted about video.min.js since it breaks IE8 support. Could someone look into this or if you aren't going to fix it, at least update the docs with an html comment in the source code so people know

Use the below to see the error, change video.min.js to video.js and see how it works fine

<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js" ></script>

<script src="http://vjs.zencdn.net/5.5.3/video.min.js" ></script>
</head>

<body>
<video controls="controls" class="video-js vjs-fluid vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{}'>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</body>
</html>

gkatsev · 2016-02-02T18:41:50Z

Can you elaborate on what you mean by ie8 being broken? Are there any errors in the console? What behavior are you seeing and what behavior are you expecting to see?
Thanks.

sethborg · 2016-02-02T18:43:20Z

Yeah console error and the Flash video player never loads because of it

gkatsev · 2016-02-02T18:47:11Z

What error are you seeing?

sethborg · 2016-02-02T18:53:44Z

Nothing useful, that's why I didn't include it:

Script error
video.min.js
Code: 0
URI: http://vjs.zencdn.net/5.5.3/video.min.js
Line: 0
Char: 0

gkatsev · 2016-02-02T18:58:02Z

Can't know unless I ask. A lot of times errors do contain useful information but the people reporting the issue don't think it's useful so they don't provide it. It's generally best to provide such information even if at first glance it seems not useful.
Thanks, we'll investigate.

kingprimex · 2016-02-02T22:01:28Z

Have you tried to use compatibility mode set to IE9? For example, JWPlayer 7 flash source not working on IE8 or lower! I suspect the same behaviour with VideoJS
P.S.1 Right click -> Inspect Element.
P.S.2 More on the issue about selecting different compatibility mode here: http://stackoverflow.com/questions/14611264/x-ua-compatible-content-ie-9-ie-8-ie-7-ie-edge

sethborg · 2016-02-03T15:24:20Z

I tried adding <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> to the page but it didn't change anything. Probably because that applies to the DOM not javascript.

There's some issue with your minimizing function that makes it incompatible with IE8.

sethborg · 2016-06-06T19:58:31Z

I just tested this in IE8 on 5.10.0 and this bug still exists. See also #3142

What I've found is that I must use video.js not video.min.js if I'm using javascript initialization for the video player or it errors on line 13611 which I've marked below.

Here are all the test cases:

http://ivcmiami.com/testvideojs/min_js_setup.htm
http://ivcmiami.com/testvideojs/min_data_setup.htm
http://ivcmiami.com/testvideojs/no_min_js_setup.htm
http://ivcmiami.com/testvideojs/no_min_data_setup.htm

  // 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.
            var player = videojs(mediaEl);     <- IT ERRORS HERE
          }
        }

        // If getAttribute isn't defined, we need to wait for the DOM.
      } else {
          autoSetupTimeout(1);
          break;
        }
    }

    // No videos were found, so keep looping unless page is finished loading.
  } else if (!_windowLoaded) {
      autoSetupTimeout(1);
    }

gkatsev · 2016-06-06T20:18:11Z

Have a reduced test case? When I was testing the fix (#3233), it was working fine for me in IE8 as well.

sethborg · 2016-06-06T20:28:33Z

reduced test cases

http://ivcmiami.com/testvideojs/min_js_setup.htm <- broken in IE8
http://ivcmiami.com/testvideojs/min_data_setup.htm <- works
http://ivcmiami.com/testvideojs/no_min_js_setup.htm <- works
http://ivcmiami.com/testvideojs/no_min_data_setup.htm <- works

gkatsev · 2016-06-06T22:05:29Z

@sethborg looks like the minified version is erroring out when you pass in a player id as a string to it. This is actually occurring because the minifier is doing weird stuff that is causing issues.
specially, it turns the main videojs function from (simplified):

var videojs = function(id, options, ready) {
   return videojs.getPlayers()[id];

to something like

var videojs = function vjs(id, options, ready) {
  return vjs.getPlayers()[id];

However, in IE8, vjs and videojs are not equal inside the function and thus it doesn't have the propery getPlayers that we expect.
Reopening and investigating why our minifier produces this code since it is also technically 2 characters longer than necessary.

gkatsev · 2016-06-06T22:06:25Z

Also, interestingly enough, if you pass in an element reference instead of a string id, it works just fine. I guess because it doesn't enter the main block that does videojs.getPlayers()

gkatsev · 2016-06-06T22:23:21Z

Looks like the issue isn't uglify but rather that babel produces a named function expression that then uglify changes the names of.

This is a fix for IE8 where the name of a named function expression is different from the variable that function is assigned to. This is an issue because our version of babel outputs functions like that. Fixes #3064 again.

gkatsev · 2016-06-07T18:24:18Z

Fixed in 5.10.5.

gkatsev mentioned this issue Feb 3, 2016

TextTrackList doesn't work in IE8 with minified version. #3070

Closed

gkatsev self-assigned this Feb 11, 2016

gkatsev mentioned this issue Feb 11, 2016

fix minified videojs in ie8 #3104

Closed

gkatsev closed this as completed in a2f5430 Feb 11, 2016

gkatsev reopened this Jun 6, 2016

gkatsev mentioned this issue Jun 6, 2016

Use function statement for videojs #3357

Closed

2 tasks

gkatsev closed this as completed Jun 7, 2016

github-actions bot locked as resolved and limited conversation to collaborators May 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

video.min.js errors in IE8, must use video.js #3064

video.min.js errors in IE8, must use video.js #3064

sethborg commented Feb 2, 2016

gkatsev commented Feb 2, 2016

sethborg commented Feb 2, 2016

gkatsev commented Feb 2, 2016

sethborg commented Feb 2, 2016

gkatsev commented Feb 2, 2016

kingprimex commented Feb 2, 2016

sethborg commented Feb 3, 2016

sethborg commented Jun 6, 2016 •

edited by gkatsev

Loading

gkatsev commented Jun 6, 2016

sethborg commented Jun 6, 2016 •

edited

Loading

gkatsev commented Jun 6, 2016

gkatsev commented Jun 6, 2016

gkatsev commented Jun 6, 2016

gkatsev commented Jun 7, 2016

video.min.js errors in IE8, must use video.js #3064

video.min.js errors in IE8, must use video.js #3064

Comments

sethborg commented Feb 2, 2016

gkatsev commented Feb 2, 2016

sethborg commented Feb 2, 2016

gkatsev commented Feb 2, 2016

sethborg commented Feb 2, 2016

gkatsev commented Feb 2, 2016

kingprimex commented Feb 2, 2016

sethborg commented Feb 3, 2016

sethborg commented Jun 6, 2016 • edited by gkatsev Loading

gkatsev commented Jun 6, 2016

sethborg commented Jun 6, 2016 • edited Loading

gkatsev commented Jun 6, 2016

gkatsev commented Jun 6, 2016

gkatsev commented Jun 6, 2016

gkatsev commented Jun 7, 2016

sethborg commented Jun 6, 2016 •

edited by gkatsev

Loading

sethborg commented Jun 6, 2016 •

edited

Loading