我有一个基于视频的应用程序，该应用程序使用按钮click事件来更改下一个视频的HTML <source>和其他一些功能。最初，每个视频都有单独的隐藏的“下一个视频”按钮。

例如，在video1的末尾，单击＃nextVideo2按钮，更新video2 HTML信息，隐藏＃nextVideo2按钮，并显示＃nextVideo3按钮。每个视频都将继续此过程。

这对于我的3或4个视频原型来说效果很好，但是我需要使其对于更多数量的视频更加有效和可扩展。

我的目标是只有一个“下一个”按钮，并在每次单击“下一个”按钮时加载下一个数字“视频”功能，而不是显示/隐藏其他按钮。

对于实现这一目标的最合适方法，我有些困惑。我应该以某种方式从数组中调用视频函数，还是增加视频函数号或完全不同的东西？

<div id="videoApp">
    <video id="videoElement"><source src="video1.mp4"></video>

  <div id="startPage">
      <h3 id="startInfo">some video1 text</h3>
  </div>

  <div id="endPage">
      <div><button id="nextVideo2">Next Video</button></div>
   // the following buttons are initially hidden with CSS
      <div><button id="nextVideo3">Next Video</button></div>
      <div><button id="nextVideo4">Next Video</button></div>
      <div><button id="endApp">Finish</button></div>
    </div>
  </div>

JavaScript

function video2() {
  $('#videoElement').html('<source src="video2.mp4">');
  $('#startInfo').html('some video2 text');
  $('#nextVideo2').hide(); $('#nextVideo3').show();
}

function video3() {
  $('#videoElement').html('<source src="video3.mp4">');
  $('#startInfo').html('some video3 text');
  $('#nextVideo3').hide(); $('#nextVideo4').show();
}

function video4() {
  $('#videoElement').html('<source src="video4.mp4">');
  $('#startInfo').html('some video4 text');
  $('#nextVideo4').hide(); $('#endApp').show();
}

$('#nextVideo2').click(video2);

$('#nextVideo3').click(video3);

$('#nextVideo4').click(video4);