Javascript 如果页面在20秒后空闲,则在播放列表中追加新的视频源
我正在使用jquery和html5显示视频播放列表。如果我的页面空闲20秒,我想添加,然后添加下一个视频源这是我的Html代码:-Javascript 如果页面在20秒后空闲,则在播放列表中追加新的视频源,javascript,jquery,html,Javascript,Jquery,Html,我正在使用jquery和html5显示视频播放列表。如果我的页面空闲20秒,我想添加,然后添加下一个视频源这是我的Html代码:- <html> <body> <figure id="video_player"> <div id="video_container"> <video controls poster="http://demosthenes.info/assets/images/vi
<html>
<body>
<figure id="video_player">
<div id="video_container">
<video controls poster="http://demosthenes.info/assets/images/vid-glacier.jpg">
<source src="http://demosthenes.info/assets/videos/glacier.mp4" type="video/mp4">
<source src="http://demosthenes.info/assets/videos/glacier.webm" type="video/webm">
</video>
</div>
<figcaption>
<a href="http://demosthenes.info/assets/videos/glacier.mp4" class="currentvid">
<img src="http://demosthenes.info/assets/images/vid-glacier.jpg" alt="Athabasca Glacier">
</a>
<a href="http://demosthenes.info/assets/videos/lake.mp4">
<img src="http://demosthenes.info/assets/images/vid-lake.jpg" alt="Athabasca Lake">
</a>
<a href="http://demosthenes.info/assets/videos/mountain.mp4">
<img src="http://demosthenes.info/assets/images/vid-mountain.jpg" alt="Mountain">
</a>
</figcaption>
</figure>
</body>
我的JavaCScript代码是:-
var video_player = document.getElementById("video_player");
video = video_player.getElementsByTagName("video")[0],
video_links = video_player.getElementsByTagName("figcaption")[0],
source = video.getElementsByTagName("source"),
link_list = [],
vidDir = "http://demosthenes.info/assets/videos/",
currentVid = 0,
allLnks = video_links.children,
lnkNum = allLnks.length;
video.removeAttribute("controls");
video.removeAttribute("poster");
(function() {
function playVid(index) {
video_links.children[index].classList.add("currentvid");
source[1].src = vidDir + link_list[index] + ".webm";
source[0].src = vidDir + link_list[index] + ".mp4";
currentVid = index;
video.load();
video.play();
}
for (var i=0; i<lnkNum; i++) {
var filename = allLnks[i].href;
link_list[i] = filename.match(/([^\/]+)(?=\.\w+$)/)[0];
(function(index){
allLnks[i].onclick = function(i){
i.preventDefault();
for (var i=0; i<lnkNum; i++) {
allLnks[i].classList.remove("currentvid");
}
playVid(index);
}
})(i);
}
video.addEventListener('ended', function () {
allLnks[currentVid].classList.remove("currentvid");
if ((currentVid + 1) >= lnkNum) { nextVid = 0 } else { nextVid = currentVid+1 }
playVid(nextVid);
})
video.addEventListener('mouseenter', function() {
video.setAttribute("controls","true");
})
video.addEventListener('mouseleave', function() {
video.removeAttribute("controls");
})
var indexOf = function(needle) {
if(typeof Array.prototype.indexOf === 'function') {
indexOf = Array.prototype.indexOf;
} else {
indexOf = function(needle) {
var i = -1, index = -1;
for(i = 0; i < this.length; i++) {
if(this[i] === needle) {
index = i;
break;
}}
return index;
};}
return indexOf.call(this, needle);
};
var focusedLink = document.activeElement;
index = indexOf.call(allLnks, focusedLink);
document.addEventListener('keydown', function(e) {
if (index) {
var focusedElement = document.activeElement;
if (e.keyCode == 40 || e.keyCode == 39) { // down or right cursor
var nextNode = focusedElement.nextElementSibling;
if (nextNode) { nextNode.focus(); } else { video_links.firstElementChild.focus(); }
}
if (e.keyCode == 38 || e.keyCode == 37) { // up or left cursor
var previousNode = focusedElement.previousElementSibling;
if (previousNode) { previousNode.focus(); } else { video_links.lastElementChild.focus(); }
}
}
});
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 10000); // 1 minute
console.log("ide..."+idleInterval);
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
});
function timerIncrement() {
idleTime = idleTime + 1;
console.log("idleTime..."+idleTime);
if(idleTime>=5){
allLnks[currentVid].classList.remove("currentvid");
if ((currentVid + 1) >= lnkNum) { nextVid = 0 } else { nextVid = currentVid+1 }
// playVid(nextVid);
}
}
})();
var video\u player=document.getElementById(“video\u player”);
video=video\u player.getElementsByTagName(“视频”)[0],
video\u links=video\u player.getElementsByTagName(“figcaption”)[0],
source=video.getElementsByTagName(“源”),
链接列表=[],
维迪尔=”http://demosthenes.info/assets/videos/",
currentVid=0,
allLnks=视频链接。儿童,
lnkNum=所有Lnks.length;
视频。删除属性(“控件”);
视频。删除属性(“海报”);
(功能(){
功能播放视频(索引){
视频链接.children[index].classList.add(“currentvid”);
source[1].src=vidDir+link_list[index]+“.webm”;
源[0]。src=vidDir+link_list[index]+“.mp4”;
currentVid=指数;
video.load();
video.play();
}
对于(变量i=0;i=5){
allLnks[currentVid].classList.remove(“currentVid”);
如果((currentVid+1)>=lnkNum){nextVid=0}否则{nextVid=currentVid+1}
//playVid(nextVid);
}
}
})();
您可以试试
var idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every sec.
var idleInterval = setInterval(timerIncrement, 1000); // 1 sec
//Zero the idle timer on mouse movement or key press.
$(this).mousemove(function (e) {
idleTime = 0;
});
$(this).keypress(function (e) {
idleTime = 0;
});
});
function timerIncrement() {
idleTime = idleTime + 1; //add 1 sec idleTime
if (idleTime > 19 ) { // if greater than 20 sec
//add you code where
idleTime = 0; // reset idleTime to 0
}
}
在页面加载时,每秒调用timeIncrement()
函数。每次调用timeIncrement()
函数时,增量idleTime
全局变量。如果idleTime
大于19,则加载另一个视频
您可以根据需要每隔一秒或每隔5秒或10秒调用timeIncrement()
。但您还需要分别在函数中增加idleTime
希望这对您有所帮助。您是指浏览器空闲时间???@SameerK是浏览器空闲时间