当最后一个视频播放下一个按钮从数组中的第一个视频开始再次播放时，视频数组无法获取

Question

视频都是来电播放的。在搜索中，建议使用 addEventListener。唉，没救了。也许我的措辞有误，但如何让下一个按钮在最后一个视频播放后返回到数组中的第一个视频。 JavaScript我还在学习弄清楚它的逻辑，它不是一个干净的野兽。凌乱的生活是我对 JS 的看法。我已经删除了这些视频，因为它们本质上是成人 (18+++)，并且不想冒犯任何人。指出的是我尝试过的，对当前设置的功能没有影响或负面影响。

let vids = [".mp4", ".mp4", ".mp4"]

// videoCount = vids.length;does nothing




  // const found = vids.find(element => element < 3); does nothing
  
//Adultvideo.addEventListener('ended', next, false); does nothing

 let i = 0;
 let src=vids[i];
function next(e)  {
  i++;
   
        if (i > 3){ 
        
       // return src; does nothing
    //return i; //does nothing

//const found = vids.find(element => element === 0); does nothing
     
     // Adultvideo.load(); does nothing
        
          //Adultvideo.play(vids[i]); does nothing

// return AdultVideo.trigger('loadstart');
       
       } 
        
        
      document.getElementById("Adultvideo").src=vids[i];
       
      
     } 
      // document.getElementById('Adultvideo').reset(src); does nothing
      //src.Adultvideo.play(i);does nothing
       
  //playVideo(i);

<body>
  <header>
    <h1>Adult Male Video 18 Plus !</h1></header>
  <main>
  <section class="vidcontainer">
    
    <!-- Don't put control into element unless you are an adult 18+ for the vid could offend and disturb you. Likewise, do not push play either as the video could offend and disturb you -->  
    <!-- had to add height to control poster --> 
   <video id="Adultvideo" muted width="500" height="340"  poster="">
  
  <source id="Adultvideo"  muted src="" type="video/mp4">
   
Your browser does not support the video tag.
</video>
    

<div class="Vcontrol"> 
  <div class="Vpanel">Control Panel</div>
  <button onclick="playVideo();">&#9655;</button>

<button onclick="pauseVideo();">&#8214;</button>
<button onclick="stopVideo();">⬜</button>
<button onclick="rewindVideo();">
  &#10226;</button>
  <button onclick="next();"><span class="reduce">&#x25b7;&#x25B7;</span>    &#x1D100;</button>
 
    </div>
     </section></main>
  
  <!-- I wish there was better instruction on this script here as copy and paste is not very good instruction -->


  <script>
  
   const Adultvideo=document.querySelector("#Adultvideo");
   
  
   
   
function playVideo() {
  Adultvideo.play();
}
function pauseVideo() {
  Adultvideo.pause();
}
function stopVideo() {
  Adultvideo.load();
}  
function rewindVideo() {
  Adultvideo.currentTime= 0;
  
  <!-- this function does not work, and unable to locate how to correct. All the extra JS does not help. The teaching sucks for this course. It does work, but still not perfect -->
  function next() {
    Adultvideo.next();
    
  }
// Adultvideo.addEventListener('ended', next, false); affects nothing
}
 // Adultvideo.addEventListener('ended', next, false); //affects nothing
   
</script>

</body>

Answer 1

您问的主要问题是“如何[如何]获得返回第一个视频的下一个按钮”...

要回答这个问题，答案很简单：使用 remainder operator。这是包装值的常见编程实践。

例如：

// Go to the next video (and wrap)
i = (i + 1) % vids.length;

// Load the new video selection
videoSrcEl.src = vids[i];
videoEl.load();

编辑:

之所以可行，是因为 i++ 等同于 i = i + 1，除法后的余数始终介于 0 和 n - 1 之间。第二部分听起来比实际情况更复杂，所以让我们看看 i % 3 作为 i 的变化（对于 n = 3）：

如果 i = 0，则 i % 3 = 0
如果 i = 1，则 i % 3 = 1
如果 i = 2，则 i % 3 = 2
如果 i = 3，则 i % 3 = 0
如果 i = 4，则 i % 3 = 1
如果 i = 5，则 i % 3 = 2
如果 i = 6，则 i % 3 = 0

...注意到模式了吗？

另一种方法是使用 if 语句：

// Go to the next video (and wrap)
i++;
if (i > vids.length - 1) {
  i = 0;
}

// Load the new video selection
videoSrcEl.src = vids[i];
videoEl.load();

不过，除了这个问题，我还想对您的其余代码提出一些更改：

不要在 <video> 和嵌套的 <source> 上都使用 id="Adultvideo"。 ID 应该是唯一的。
不要像onclick="playVideo();"那样使用内联JS。这需要一个全局函数，这很少是您真正想要的。更好的方法是在 JS 的某个地方使用 playButton.addEventListener('click', playVideo)（我添加了一个 IIFE 以确保没有意外是全局的）

我在下面做了一个工作示例，它使用了很多新的 JS 语法，但我希望你能理解它。这些可能只是我的偏好，但请注意：

arrow functions 确实与常规函数有一些不同，但它们大部分是等价的。我使用它们是因为它们更短
我发现几乎在所有情况下只使用类并避免使用 ID 更容易。我确实将 CSS 类与 JS 类分开了，尽管
const 阻止某些更改（重新分配），但在其他方面类似于 let

// IIFE
;(() => {
  // Create a couple reusable functions (DRY up the code below)
  const el = s => document.querySelector(`.js-${s}`)
  const click = (s, fn) => el(s).addEventListener('click', fn)

  // Get references to DOM elements (see HTML)
  const videoEl = el('video')
  const videoSrcEl = el('video-src')

  // List of videos (I found a few random ones from across the web)
  const vids = [
    'https://i.imgur.com/tTaZyQC.mp4',
    'https://i.imgur.com/WHifiaH.mp4',
    'http://giant.gfycat.com/FineDangerousFruitbat.mp4'
  ]

  let i = 0 // <-- which video is currently selected

  // Handle clicks
  click('play', () => { videoEl.play() })
  click('pause', () => { videoEl.pause() })
  click('stop', () => { videoEl.load() })
  click('rewind', () => { videoEl.currentTime = 0 })
  click('next', () => {
    // Go to the next video (and wrap)
    i = (i + 1) % vids.length

    // Load the new video selection
    videoSrcEl.src = vids[i]
    videoEl.load()
  })

  // Load the first video
  videoSrcEl.src = vids[i]
})()

<header>
  <h1>Title Here</h1>
</header>
<main>
  <section class="video">
    <video class="js-video" muted width="500" height="340" poster="">
      <source class="js-video-src" muted src="" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <div class="video-control">
      <div class="video-panel">Control Panel</div>
      <button class="js-play">&#9655;</button>
      <button class="js-pause">&#8214;</button>
      <button class="js-stop">⬜</button>
      <button class="js-rewind">&#10226;</button>
      <button class="js-next">
        <span class="reduce">&#x25b7;&#x25B7;</span>&#x1D100;
      </button>
    </div>
  </section>
</main>

Answer 2

"How to get the next button to go back to the first video in the array after the last video..."

数组中的位置从零开始作为第一项，因此具有 3 个项目的数组的位置（索引）为：

array[0], array[1], array[2]

如您所见，最后一项的索引为 2，这恰好是 3 个项目的总长度的 minus 1。换句话说，最后一项pos可以从array.length - 1计算（例如： 3 - 1 = 2）。

尝试这样的事情：

<script>

var i = 0;
var vids = ["first.mp4", "second.mp4", "third.mp4"]; //has positions [0, 1, 2] 
var videoCount = vids.length; //is 3

var myPlayer = document.getElementById("Adultvideo");

function playVideo() { myPlayer.play(); }
function pauseVideo() { myPlayer.pause(); }
function stopVideo() { myPlayer.currentTime = 0; myPlayer.pause();  }  
function rewindVideo() { myPlayer.currentTime = 0; }

function next()
{
    i++; //# count range is from 0 up to 2 (since total is 3 items)

    if (i == 2) { i = 0; } //reset after third count
    //if (i == (vids.length - 1) ) { i = 0; } //or auto-detect total items then reset 

    myPlayer.src = vids[i];
    myPlayer.play();
} 
     
</script>

当最后一个视频播放下一个按钮从数组中的第一个视频开始再次播放时，视频数组无法获取

Video array unable to get when last video plays the next button to play again starting at first video in array

javascript

video

arraylist

button