Weird IE, Javascript only works in development mode (F12)

Question

Basically, I have two tags, one is hidden and one is shown.

The hidden one will load video at background, and when the front one is finished, I will swap the two by hiding the shown one.

I will also have a list of playable videos on server side, I will use ajax to get the list and decide which one to load next.

Anyway it is hard for you to try this because you need to have a video server, and I found it's hard to chop the code, so I will just show you the whole source code (with some comments), hope you can understand.

I used jquery and video.js. The source code is as follows,

HTML:

<div class="container" id="video-container-1">
</div>
<div class="container" id="video-container-2">
</div>

Javascript:

//I am making a live video by chopping the video into MP4 files of 800ms each
//The play rate has to be adjustable or the local browser and live server will not sync
var play_rate = { 1.0:800, 1.01:790, 1.02:785, 1.03:777, 1.04:770, 1.05:762, 1.06:755, 1.07:748,
  1.08:741, 1.09:734, 1.1:727 };
var min_rate=1.0;
var max_rate=1.1;
var base_rate = 1.03;
var current_rate = base_rate;
var timer_value = play_rate[current_rate];

var key_to_play;
var timer_id;
var newest_key;
var video_server_address = "192.168.100.1:20001";


var current_play = 1;
var container = new Array();
var player = new Array;

function video_html(container_id, id) {
  return '<video id="video-js-' + container_id + '" class="video-js vjs-default-skin" ' +
  ' preload="auto" width="960" height="540"  crossorigin="anonymous" ' +
  'data-setup=\'{"example_option":true}\'>' +
  '\t<source src="http://' + video_server_address +'/live/' + id + '.mp4" type="video/mp4" /> \n' +
  '\t\t<track id="video-vtt" kind="subtitle" label="english" srclang="en" src="http://' + video_server_address + '/live/' + id + '.vtt" default></track>\n ' +
  '\t\t<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>\n' +
  '</video>';
}
function play_next()
{
  var next_play;
  if (current_play == 1)
    next_play = 2;
  else
    next_play = 1;

  player[next_play - 1].play();
  container[next_play - 1].show();
  container[current_play - 1].hide();
  if (player[current_play - 1])
    player[current_play - 1].dispose();

  key_to_play++;

  //switch current & next
  current_play = next_play;

  timer_id = setTimeout(function() {
    play_next();
  }, timer_value);

  //Assuming get list + load video < 700ms
  $.get("http://" + video_server_address + "/live/list", 
    function(list){
      keys = list["keys"];
      newest_key = keys[keys.length - 1];


      console.log("key_to_play: " + key_to_play + "  newest_key: " + newest_key);

      var next_play;
      if (current_play == 1)
        next_play = 2;
      else
        next_play = 1;
      //-----------------begin-------------------
      //not really useful to you because these are just 
      //to let the video play sync with video server, we can safely 
      //remove these but the video play will out of sync after some time    
      if (key_to_play > newest_key)
      {
        //too fast
        //make it slower?
        if (current_rate > min_rate)
        {
          current_rate = current_rate - 0.01;
          timer_value = play_rate[current_rate];
        }
        else
        {
          //it is already 1.0 (the slowest settings)
          //have to crop on the timer_value
          timer_value = play_rate[current_rate] + 5 * (key_to_play - newest_key);
        }
        //either wait or play again? just play again and test for stability first
        key_to_play = newest_key;
      }
      else if (key_to_play == newest_key || key_to_play == newest_key - 1)
      {
        //the best situation we got
        //don't change anything
      }
      else
      {
        //a little slow
        if (current_rate < max_rate)
        {
          current_rate = current_rate + 0.01;
          timer_value = play_rate[current_rate];
        }
        else
        {
          timer_value = play_rate[current_rate] - 5 * (newest_key - key_to_play);
        }

        //tooo slow, drop 4 * 800ms data
        if (newest_key - key_to_play > 5)
        {
          key_to_play = newest_key - 1;
        }
      }
      //-------------------end------------

      container[next_play - 1].html(video_html(next_play, key_to_play));
      player[next_play - 1] = videojs('video-js-' + next_play, {}, function(){
        // Player (this) is initialized and ready.
        //the following is only to make the browser show subtitle
        //without this, the FF will not show subtitle by default
        $('#video-container-' + next_play + " div.vjs-subtitles-button li.vjs-menu-item").eq(1).trigger('click');
      });
      player[next_play - 1].playbackRate(current_rate);



      console.log(timer_value);
    }
  );



}

$( document ).ready(function() {
  $.get("http://" + video_server_address + "/live/list", function(list){
    keys = list["keys"];
    key_to_play = keys[keys.length - 2];
    newest_key = keys[keys.length - 1];

    container[0] = $("div#video-container-1");
    container[1] = $("div#video-container-2");
    container[0].hide();

    container[1].html(video_html(2, key_to_play));
    player[0] = null;
    player[1] = videojs("video-js-2",{}, function(){
      // Player (this) is initialized and ready.
      console.log($("#video-container-2 div.vjs-subtitles-button li.vjs-menu-item").eq(1).text());
      $("#video-container-2 div.vjs-subtitles-button li.vjs-menu-item").eq(1).trigger('click');
    });
    player[1].playbackRate(current_rate);

    play_next();
  });
});
</script>

This code works good on chrome and FF, however, when trying on IE11, the new videos will not load, it will switch between two videos (say video 1 and 2) every 800ms, and I think it will load the latter ones (3, 4, 5 and so one), but it will not play, it is just keep playing 1 and 2 and 1 and 2.

When I try to debug it, I open IE11 development tools, then when development tools is ready, IE11 will work well.

As long as I close the development tools, IE11 will suck.

I am thinking maybe IE11 made some optimization and optimized some of the codes away? How can I check that?

Thanks.

It has been the case in the past that using `console.log()` would cause IE to fail unless the developer tools are open. As an experiment, you could try your code after commenting out the `console.log()` calls. — Pointy, Jun 29 '15 at 03:37
It's not just console.log, it's ANY reference to the console. Whole bunch of good reasons here http://stackoverflow.com/questions/7742781/why-javascript-only-works-after-opening-developer-tools-in-ie-once — Equalsk, Jun 29 '15 at 08:25
Thanks Equalsk! From your link I found another problem of IE, it will use cache if URL is same. For my case, it is "http://server_address/live/list" which will return the latest sets of available live video, and will be different, but IE will use cache. I solved it using {cache: false} of jquery ajax. Thanks again. — user534498, Jun 29 '15 at 10:18
Glad it worked, thanks for letting us know! Have added it as an answer for future visitors :-) — Equalsk, Jun 29 '15 at 12:38

score 17 · Accepted Answer · edited May 23 '17 at 12:17

17

Taken from the comments on the original question:

Why does JavaScript only work after opening developer tools in IE once?

For OP it was the caching of his Ajax request causing the issue. Solved by disabling the cache:

$.ajax({cache: false, ...})

edited May 23 '17 at 12:17

Community

1
1

answered Jun 29 '15 at 12:38

Equalsk

7,954
2
41
67

score 5 · Answer 2 · edited Jun 29 '15 at 03:42

5

As you are using the below code

console.log("key_to_play: " + key_to_play + "  newest_key: " + newest_key);

Here you should check if the console object exists or not, when you press F12, it automatically creates console object, you should write it like this

if (typeof console == "object") {
    console.log("key_to_play: " + key_to_play + "  newest_key: " + newest_key);
}
else{
    //do nothing`enter code here`
}

edited Jun 29 '15 at 03:42

jasonscript

6,039
3
28
43

answered Jun 29 '15 at 03:41

SMT

469
1
5
17

I've just commented all console.log, but still wrong. It seems that it is not console.log causing problem at the above code. – user534498 Jun 29 '15 at 03:55

score 0 · Answer 3 · answered Sep 29 '15 at 15:30

This answer is for the same behaviour in IE (caching ajkax calls) but with AngularJS not JQuery. I'll post it here so it can help another one like me.

We found that IE didn't worked well in some pages unless DevTools (F12) where active for the first time. Finally thanks to this question whe noticed that IE was caching JS GET calls. So, when working with angular, in order to avoid that behaviour you should do this:

$httpProvider.defaults.headers.common['If-Modified-Since'] = '0';

Weird IE, Javascript only works in development mode (F12)

3 Answers3