如何更有效地使用 NEXT 按钮

霍顿雪佛

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

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

这适用于我的 3 或 4 个视频原型，但我需要使其更高效和可扩展，以处理更多视频。

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

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

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

杰森B

您可以将视频 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();
    }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。