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 sounds like you might have some debugging code in your javascript. The experience you're describing is typical of code which contain console. log() or any of the other console functionality. The console object is only activated when the Dev Toolbar is opened.
Launch IE. Enter WebGUI URL in IE address bar and login. 2. Once you are ready to re-create the problem, click Tools -> F12 Developer Tools to turn on Developer Tools.
After loading a web page completely, press the F12 key to open the developer tools, then open the 'Sources' tab. Now open any Javascript file loaded on the browser and you can directly edit it by clicking anywhere in that file. After making modifications press Ctrl+S to save the changes.
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, ...})
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`
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With