Geek Answers Handbook

Calling the next item in my array

I have an array of videos right now. How to do this when I click next and precede the next or previous video in an array.

 <video id="video" controls autoplay width="1000">
  <source src="videos/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="videos/test.ogv" />
 </video>

<a href="#" onClick="javascript:vidSwap(vidURL[i+]); return false;">next</a>



<script>
var vidURL=["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos/test4.ogv","videos/test5.ogv"    ]; // literal array
function vidSwap(vidURL) {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
 myVideo.play();
}

+5
source share
4 answers

Using yout code, it will be something like this. You need to make the video that you uploaded to the javascript variable. Then, when you press prev or next, you can call a function that will put the correct video number and call it.

<script>
var vidURL=["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos"]
var video = 0;

function vidSwap() {
  var myVideo = document.getElementsByTagName('video')[video];
  myVideo.src = vidURL[video];
  myVideo.load();
  myVideo.play();
}


function prevVideo() {
  if(video == 0) {
    video = vidUrl.length;
  }
  else {
    video -= 1;
  }

  vidSwap();
}

function nextVideo() {
  if(video == length) {
    video = 0;
  }
  else {
    video += 1;
  }

  vidSwap();
}

</script>


 <video id="video" controls autoplay width="1000">
  <source src="videos/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="videos/test.ogv" />
 </video>

<a href="#" onClick="javascript:prevVideo(); return false;">prev</a>
<a href="#" onClick="javascript:nextVideo(); return false;">next</a>
+2
source

Enter a variable that will save the current video index, then increase or decrease it each time you click next / prev

</script>
var i = 0;
<script>

javascript:vidSwap(vidURL[i++])
+1
source

, .

<a href="#" onClick="javascript:vidSwap(vidURL[i+]); return false;">next</a>


<a href="#" onClick="javascript:vidSwap(vidURL[i++]); return false;">next</a>
+1

;

<a href="#" onClick="return Vids.next();">next</a>
<a href="#" onClick="return Vids.prev();">prev</a>

...

var Vids = (function() {
    var _currentId = -1;
    var _urls = ["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos/test4.ogv","videos/test5.ogv"    ]; // literal array
    return {
        next: function() {
            if (++_currentId >= _urls.length)
                _currentId = 0;
             return this.play(_currentId);
        },
        prev: function() {
            if (--_currentId < 0)
                _currentId = _urls.length - 1;
            return this.play(_currentId);
        },
        play: function(id) {
            var myVideo = document.getElementsByTagName('video')[0];
            myVideo.src = _urls[id];
            myVideo.load();
            myVideo.play();
            return false;
       }
    }
})();
+1

More articles:


All Articles