Question

我有一个基于视频的应用程序，该应用程序使用按钮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);

Answer 1

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

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 0.01
}

Answer 2

<div id="videoApp">
  <video id="videoElement"></video>

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

  <div id="endPage">
    <div><button id="nextVideo">Next Video</button></div>      
    <div><button id="endApp">Finish</button></div>
  </div>  
</div>

const _videos = [
  {id:"1", src:"video1.mp4", startInfo:"some video1 text"},
  {id:"2", src:"video2.mp4", startInfo:"some video2 text"},
  {id:"3", src:"video3.mp4", startInfo:"some video3 text"}   
];

let _currentIndex = 0;

 function init() { // probably on page load

    if( _videos.length > 0 ) {

    document.getElementById("videoElement").src = _videos[_currentIndex].src
    $('#startInfo').html(_videos[_currentIndex].startInfo);

    $('#nextVideo').click( function() {            
        _currentIndex++;
        // Check if we reached last video
        let isThisLastVideo = (_videos.length == (_currentIndex+1));
        document.getElementById("videoElement").src = _videos[_currentIndex].src;
        $('#startInfo').html(_videos[_currentIndex].startInfo);
        $(this).toggle(!isThisLastVideo) 
        $('#endApp').toggle(isThisLastVideo); 
    });
 } 
}

如何更有效地使用NEXT按钮

2 个答案: