Question

我正在进行一项实验，我会在线播放视频，并要求参与者对每个视频进行回复。

我有200个视频，但每个大小都是1 MB，javascript似乎坚持同时加载它们（这通常会导致我的浏览器崩溃）。首先，任何人都可以帮我修改下面的脚本，只在需要时才加载视频吗？（比如，当参与者点击“下一个剪辑”时）？

其次，升级到OS Mavericks后，autoplay属性不再起作用（）..任何人都可以在点击“NEXT CLIP”时自动运行视频吗？

我对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>

Answer 1

我不知道确切的代码，但您可能会使用处理程序等待下一个视频的点击以加载下一个视频。

现在，要继续播放下一个视频，您可以使用onclick属性创建按钮，链接或跨度，以触发移动到下一个功能。你也可以使用上面关于处理程序的想法来完成同样的事情（第一个通常会更容易编码和维护）。

Answer 2

需要考虑的一些逻辑 。

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 */

}

4）playvideo()功能。这也可以称为您的视频渲染器，请注意我们将视频编号传递给它。在此示例中，假设我们在javascript代码上方有一个id为“videoplayer”的html div元素。

<div id="videoplayer"></div>

返回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 */

}

5）通过调用playvideo(0);

启动程序

希望不会在这里遇到语法，我确信有错误和改进 - （不删除视频，只是隐藏它以备日后召回）

这就是我们如何处理这样的工作。最好先绘制出软件的组成部分，分离出构成解决方案的任务并单独处理它们。

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

希望有所帮助。

获取javascript一次加载一个视频+点击自动播放

2 个答案: