javascript - calling the next item in my array - Stack Overflow

admin管理员组

文章数量:1319484

right now I have an array of videos. How do I make it so when i click next and prev the next or previous video in the array loads.

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

right now I have an array of videos. How do I make it so when i click next and prev the next or previous video in the array loads.

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

• javascript
• arrays

Share Improve this question Follow edited Jun 12, 2023 at 21:48 Jonas 129k102102 gold badges327327 silver badges405405 bronze badges asked Nov 17, 2011 at 17:17 goetzsgoetzs 11222 silver badges1212 bronze badges 1

• In an onclick attribute, javascript is assumed, so there is no need to preface your function call with javascript:. Also I remend getting started with jQuery if you haven't already. – benekastah Commented Nov 17, 2011 at 19:08

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Using yout code, it'll be something like this. What you need to do is have the video that you loaded on a javascript variable. Then, when you click 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>

Introduce variable which will save current video index, then increment it or decrement it each time you press next/prev

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

javascript:vidSwap(vidURL[i++])

It looks like you're missing another plus sign in your increment operator.

Try changing

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

To this

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

Wrapped up alternative with wrap-around;

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

本文标签： javascriptcalling the next item in my arrayStack Overflow