javascript - 如何更有效地使用 NEXT 按钮

Question

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

例如，在 video1 结束时，单击 #nextVideo2 按钮时，video2 HTML 信息将更新，#nextVideo2 按钮将隐藏，#nextVideo3 按钮将显示。每个视频都会继续此过程。

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

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

我有点困惑实现这一目标最合适的方法是什么。我应该以某种方式从数组调用视频函数或增加视频函数编号或完全不同的东西吗？

<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);

Answer 1

您可以将视频 src url 和其他信息存储在对象数组中。要么保留对当前视频的引用，要么在按下下一个按钮时在数组中查找它。此示例将 url 和 textcomponent 数据存储在对象数组中。

videos = [ 
    { src: 'a.mp4', info: 'some text' }, 
    { src: 'b.mp4', info: 'some other text' }
];
currentVideoIndex = 0;

$('#nextVideo').click( function() {
    currentVideoIndex++;
    $('#videoElement').html('<source src="' + videos[currentVideoIndex].src + '">');
    $('#startInfo').html( videos[currentVideoIndex].info );

    if ( currentVideoIndex >= videos.length - 1 ) {
        $( this ).hide();
        $( '#endButton' ).show();
    }
});