让javascript一次加载一个视频+；点击自动播放

我正在做一个实验，在这个实验中，我在线播放视频，并要求参与者对每一个视频做出回应

然而，我有200个视频，每个视频大小为1MB，javascript似乎坚持要同时加载所有视频（这通常会使我的浏览器崩溃）。 首先，谁能帮我修改下面的脚本，使视频只在需要时加载？（比如，当参与者点击“下一个剪辑”时）

其次，升级到OS Mavericks后，autoplay属性不再工作（）。。任何人都可以在点击“下一个剪辑”后自动运行视频吗

我对javascript相当陌生——非常感谢您的反馈

<script>

for (var i=0;i<numberOfVideos;i++) {

var evenI = 2+2*i;   // on even pages, they view the video
var oddI = 3+2*i;    // on odd pages, they input their response

document.write('<div id="page' + evenI + '">');
document.write('<p><video autoplay=true><source src=' + videoList[i] + ' type="video/mp4"/></video></p>');
document.write('<a href="javascript:NextTrial()"> Click here to give your response </a>');

document.write('<div id="page' + oddI + '">');
document.write('<p>How many people were in this video?</p>');
document.write('<p><input name="video' + i + '" type="radio" value="1" /> 1 &nbsp; <input name="video' + i + '" type="radio" value="2" /> 2 </p>');
document.write('<a class="nextLink" href="javascript:NextTrial()">NEXT CLIP</a>');

}

</script>

对于（var i=0；i我不知道这方面的确切代码，但您可能可以使用处理程序等待单击以加载下一个视频

现在，为了继续下一个视频，您可以使用
onclick
属性创建一个按钮、链接或span，以触发移动到下一个函数。您还可以使用上面关于处理程序的想法来完成同样的事情（第一个通常会更容易编码和维护）
 < P> <强>一些逻辑< /强>考虑。

1） 我们有视频的数量，很好-分配给一个变量，你可以参考

var totalvideos = videoList.length;

2） 假设我们从视频1开始，很好-将当前观看的视频分配给一个变量

var currentvideo = 1;

3） 我们需要一个html按钮来继续并跳到下一个-太好了，使用它调用一个名为“
playnextvideo（）
”的函数，该函数使用“currentvideo”变量和视频总数

function playnextvideo() {
     var nextvideo = currentvideo+1;
    if(nextvideo<=totalvideos) { playvideo(nextvideo); } 
    else { alert("no more videos"); }

   currentvideo++; /* update the current video variable */

}

返回javascript和
playvideo（）
函数-

function playvideo(number) {

var newvideo = "<video autoplay='true'>";
    newvideo+="<source src='" + videoList[number] + "' type='video/mp4'/>";
  newvideo+= "</video>";

/* where we are printing the videos*/
var videoplayerdiv = document.getElementbyId("videoplayer"); 

videoplayerdiv.innerHTML=""; /* remove the old one */

videoplayerdiv.innerHTML=newvideo; /* add the new one */

}

功能播放视频（数字）{
var newvideo=“”；
新视频+=“”；
新视频+=“”；
/*我们在哪里打印视频*/
var videoplayerdiv=document.getElementbyId（“视频播放器”）；
videoplayerdiv.innerHTML=“；/*删除旧的*/
videoplayerdiv.innerHTML=newvideo；/*添加新的*/
}

5） 通过调用
playvideo（0）启动程序

希望不要被这里的语法所困扰，我确信会有错误和改进（不是一次删除视频，只是为了以后的回忆而隐藏它）

这就是我们如何处理这样的工作。最好先规划出软件的组件，分离出组成解决方案的任务，然后分别处理它们


视频的打印
视频导航
将下一个（单击）事件附加到按钮
处理完
处理错误

希望有帮助。
如果你能重写问题的脚本部分，那会有所帮助。它并没有全部出现。也许可以尝试用四个空格缩进代码的每一行，以便知道代码的格式…谢谢您的评论@克里斯实际上是为我做的：）
function playvideo(number) {

var newvideo = "<video autoplay='true'>";
    newvideo+="<source src='" + videoList[number] + "' type='video/mp4'/>";
  newvideo+= "</video>";

/* where we are printing the videos*/
var videoplayerdiv = document.getElementbyId("videoplayer"); 

videoplayerdiv.innerHTML=""; /* remove the old one */

videoplayerdiv.innerHTML=newvideo; /* add the new one */

}