Weird IE, Javascript only works in development mode (F12)
Solution 1
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, ...})
Solution 2
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`
}
user534498
Updated on July 08, 2022Comments
-
user534498 almost 2 years
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.