title: Video array unable to get when last video plays the next button to play again starting at first video in array
body: <p>The videos all play when called. In search, addEventListener was suggested. Alas, no help. Perhaps I'm wording it wrong, but how to get the next button to go back to the first video in the array after the last video has played. JavaScript I am still learning to figure out its logic, and it is not a clean beast. Messy life is my outlook with JS. I have removed the videos as they are adult in nature (18+++), and do not want to offend anyone. The noted out  are what I have tried that have no impact or negative impact on how the current setup functions.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let vids = [".mp4", ".mp4", ".mp4"]
  
  // videoCount = vids.length;does nothing
  
  
  
  
    // const found = vids.find(element =&gt; element &lt; 3); does nothing
    
  //Adultvideo.addEventListener('ended', next, false); does nothing
  
   let i = 0;
   let src=vids[i];
  function next(e)  {
    i++;
     
          if (i &gt; 3){ 
          
         // return src; does nothing
      //return i; //does nothing
  
  //const found = vids.find(element =&gt; 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);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;header&gt;
      &lt;h1&gt;Adult Male Video 18 Plus !&lt;/h1&gt;&lt;/header&gt;
    &lt;main&gt;
    &lt;section class="vidcontainer"&gt;
      
      &lt;!-- 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 --&gt;  
      &lt;!-- had to add height to control poster --&gt; 
     &lt;video id="Adultvideo" muted width="500" height="340"  poster=""&gt;
    
    &lt;source id="Adultvideo"  muted src="" type="video/mp4"&gt;
     
  Your browser does not support the video tag.
  &lt;/video&gt;
      
  
  &lt;div class="Vcontrol"&gt; 
    &lt;div class="Vpanel"&gt;Control Panel&lt;/div&gt;
    &lt;button onclick="playVideo();"&gt;&amp;#9655;&lt;/button&gt;
  
  &lt;button onclick="pauseVideo();"&gt;&amp;#8214;&lt;/button&gt;
  &lt;button onclick="stopVideo();"&gt;⬜&lt;/button&gt;
  &lt;button onclick="rewindVideo();"&gt;
    &amp;#10226;&lt;/button&gt;
    &lt;button onclick="next();"&gt;&lt;span class="reduce"&gt;&amp;#x25b7;&amp;#x25B7;&lt;/span&gt;    &amp;#x1D100;&lt;/button&gt;
   
      &lt;/div&gt;
       &lt;/section&gt;&lt;/main&gt;
    
    &lt;!-- I wish there was better instruction on this script here as copy and paste is not very good instruction --&gt;
  
  
    &lt;script&gt;
    
     const Adultvideo=document.querySelector("#Adultvideo");
     
    
     
     
  function playVideo() {
    Adultvideo.play();
  }
  function pauseVideo() {
    Adultvideo.pause();
  }
  function stopVideo() {
    Adultvideo.load();
  }  
  function rewindVideo() {
    Adultvideo.currentTime= 0;
    
    &lt;!-- 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 --&gt;
    function next() {
      Adultvideo.next();
      
    }
  // Adultvideo.addEventListener('ended', next, false); affects nothing
  }
   // Adultvideo.addEventListener('ended', next, false); //affects nothing
     
  &lt;/script&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>