我有多个视频阵列。眼下，下面的代码工作的，因为它播放多个视频一前一后。然而，他们的时间无关，我专门要玩这些视频了整整一个小时。我怎样才能做到这一点使用Javascript？
<body onload="myNewSrc()">
<div id="section-title">
<video onended="myAddListener()" autoplay controls width="100%" height="auto">
<source src="" type="video/mp4">
</video>
</div>
<script>
var videoSources = ["http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4",
"http://www.html5videoplayer.net/videos/toystory.mp4",
"http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4",
"http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4",
"http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"
];
var currentIndex = 0;
//listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = videoSources[currentIndex];
myVideo.load();
}
function myAddListener() {
var myVideo = document.getElementsByTagName('video')[0];
currentIndex = (currentIndex + 1) % videoSources.length;
myVideo.src = videoSources[currentIndex];
myVideo.addEventListener('ended', myNewSrc, false);
}
</script>
</body>
一个DOMContentLoaded事件侦听器添加到身上，那里面，使用Date.now()获取当前时间并将其存储在某个变量。
每一个视频播放完时存储的时间，然后比较当前时间。如果一个多小时已经过去，然后结束播放。
你可以做这样的事情
var startTime;
var videoSources =
["http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.html5videoplayer.net/videos/toystory.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"];
var currentIndex =0;
//listener function changes src
function myNewSrc(){
startTime = new Date;
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src=videoSources[currentIndex];
myVideo.load();
}
function myAddListener(){
if ((new Date) - startTime > (60 * 60 * 1000)) {
return;
}
var myVideo=document.getElementsByTagName('video')[0];
currentIndex=(currentIndex+1)%videoSources.length;
myVideo.src=videoSources[currentIndex];
myVideo.addEventListener('ended',myNewSrc,false);
}