javascript - Javascript下一个视频功能

Question

我正在尝试创建一种视频幻灯片形式。我希望能够有两个按钮通过一系列视频源前进和后退。这是我到目前为止所拥有的。

<script>
 var vids = new Array();
vids[0] = "images/movie1.mp4"
vids[1] = "images/movie3.mp4"

var i = (vids[0]);
</script>

<script>
function next()
    {
        document.getElementById("myvideo").src=([i]);
        }
</script>

<video id="myvideo" width="320" height="240" controls>
<source src="images/movie1.mp4" type="video/mp4">
</video>

<button type="button" onclick="next()">try</button>

看起来很简单，但是当我尝试使用将 i 递增一（i++）的函数时，它不会选择下一个视频。

本质上，我需要有人帮助我创建一种方法，使变量我向下移动到数组的下一个视频。谢谢！

Answer 1

最简单的方法是：

var vids = [
  "images/movie1.mp4",
  "images/movie3.mp4"
];

var i = 0;

function next() {

  if (i >= vids.length) {
    alert('too far!');
    return;
  }

  document.getElementById("myvideo").src=vids[i];
  i++;
};

Answer 2

var vids = new Array();
vids[0] = "http://media.w3.org/2010/05/sintel/trailer.mp4";
vids[1] = "http://media.w3.org/2010/05/bunny/trailer.mp4";
var i = 1;
function next()  {
        if (i > 1){
            window.alert("Too far");
            return;
        }
        document.getElementById("myvideo").src=vids[i];
        i++;
};

一个链接- 您重新设计的代码。我不明白 ([i]) 是什么意思。