में काम करता है असल में, मेरे पास दो टैग हैं, एक छुपा हुआ है और एक दिखाया गया है।अजीब आईई, जावास्क्रिप्ट केवल विकास मोड (एफ 12)
छुपा हुआ व्यक्ति पृष्ठभूमि में वीडियो लोड करेगा, और जब फ्रंट एक समाप्त हो जाएगा, तो मैं दिखाए गए एक को छुपाकर दोनों को स्वैप कर दूंगा।
मेरे पास सर्वर की तरफ खेलने योग्य वीडियो की एक सूची भी होगी, मैं सूची पाने के लिए AJAX का उपयोग करूंगा और तय करूँगा कि अगला लोड करने वाला कौन सा है।
वैसे भी यह आपके लिए प्रयास करना मुश्किल है क्योंकि आपको वीडियो सर्वर होना चाहिए, और मुझे लगता है कि कोड को काटना मुश्किल है, इसलिए मैं आपको केवल संपूर्ण स्रोत कोड (कुछ टिप्पणियों के साथ) दिखाऊंगा, आशा करता हूं कि आप समझ सकता हूं।
मैंने jquery और video.js का उपयोग किया। स्रोत कोड के रूप में निम्न प्रकार है,
HTML:
<div class="container" id="video-container-1">
</div>
<div class="container" id="video-container-2">
</div>
जावास्क्रिप्ट:
//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>
इस कोड क्रोम और एफएफ पर अच्छा काम करता है, तथापि, जब IE11 पर कोशिश कर, नए वीडियो नहीं होगा लोड, यह प्रत्येक 800ms (वीडियो 1 और 2 कहें) के बीच स्विच करेगा, और मुझे लगता है कि यह बाद वाले लोगों को लोड करेगा (3, 4, 5 और एक), लेकिन यह नहीं खेलेंगे, यह सिर्फ 1 खेल रहा है और 2 और 1 और 2.
जब मैं इसे डीबग करने का प्रयास करता हूं, तो मैं IE11 विकास उपकरण खोलता हूं, फिर जब विकास उपकरण तैयार होते हैं, तो IE11 अच्छी तरह से काम करेगा।
जब तक मैं विकास उपकरण बंद करता हूं, IE11 चूस जाएगा।
मुझे लगता है कि आईई 11 ने कुछ अनुकूलन किया है और कुछ कोडों को अनुकूलित किया है? मैं इसे कैसे देख सकता हूं?
धन्यवाद।
यह अतीत में ऐसा होता है कि का उपयोग कर 'console.log()' आईई जब तक डेवलपर उपकरण विफल हो जाएगा कर दिया गया है: तो, जब कोणीय के साथ काम करने के क्रम में है कि व्यवहार आप इस करना चाहिए से बचने के लिए खुला है। एक प्रयोग के रूप में, आप 'console.log()' कॉल पर टिप्पणी करने के बाद अपना कोड आजमा सकते हैं। – Pointy
धन्यवाद, मैं अभी कोशिश करूंगा। – user534498
हाय, सभी console.log पर टिप्पणी की, अभी भी सही नहीं है। :( – user534498