在JS和HTML中以10秒结束当前视频后，在数组中开始下一个视频

Question

我目前正在构建一个html 5视频播放器并且有点卡住了。我正在寻找的是视频完成后播放提示，视频结束后立即显示下一个视频的标题，以便用户点击进入下一个视频。

如果用户在10秒后没有互动，视频播放器将自动播放下一个视频。我有js调用视频结束启动计时器，我似乎无法绕过的东西是抓住列表中的下一个视频。

到目前为止，你可以看到我在这里发生了什么： http://xeroproject.com/hopkins/

任何帮助都会很棒。感谢

代码。

private class AsyncCallWSVerificaUsuario extends AsyncTask<String, Void, Void> {

private final String NAMESPACE = "http://ws/";
private final String URL = "http://localhost:8080/ColecaoFilmes/ColecaoFilmes";
private final String SOAP_ACTION = "http://localhost:8080/ColecaoFilmes/ColecaoFilmes/verificaUsuario";
private final String METHOD_NAME = "verificaUsuario";

        @Override
        protected Void doInBackground(String... params) {
            getResposta();
            return null;
        }

        @Override
        protected void onPostExecute(Void result) {

        }

        @Override
        protected void onPreExecute() {

        }

        @Override
        protected void onProgressUpdate(Void... values) {
        }

        public void getResposta() {
            //Create request
            SoapObject request = new SoapObject(NAMESPACE, METHOD_NAME);

            PropertyInfo login = new PropertyInfo();
            login.type = PropertyInfo.STRING_CLASS;
            login.setValue(loginCadastro.getText().toString());
            login.setName("login");
            login.setType((String.class));
            request.addProperty(login);

            PropertyInfo senha = new PropertyInfo();
            senha.type = PropertyInfo.STRING_CLASS;
            senha.setValue(senhaCadastro.getText().toString());
            senha.setName("senha");
            senha.setType((String.class));
            request.addProperty(senha);

            SoapSerializationEnvelope envelope = new SoapSerializationEnvelope(SoapEnvelope.VER11);
            envelope.setOutputSoapObject(request);
            HttpTransportSE androidHttpTransport = new HttpTransportSE(URL);

            try {
                androidHttpTransport.call(SOAP_ACTION, envelope);
                SoapPrimitive response = (SoapPrimitive) envelope.getResponse();

            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

$(window).on('load', function() {
  $(function() {
    $("#videoarea").bind("ended", function() {
      /*alert('Video ended!');*/
      theTimer();
    });


    $("#playlist li").on("click", function() {
      $("#videoarea").attr({
        "src": $(this).attr("movieurl"),
        "poster": "",
        "autoplay": "autoplay"
      })
    })
    $("#videoarea").attr({
      "src": $("#playlist li").eq(0).attr("movieurl"),
      "poster": $("#playlist li").eq(0).attr("moviesposter")
    })
  })
});

function theTimer() {
  var timeleft = 10;
  var downloadTimer = setInterval(function() {
    timeleft--;
    document.getElementById("countdowntimer").textContent = timeleft;
    if (timeleft <= 0)
      clearInterval(downloadTimer);
    nextVideo();
  }, 1000);
}

function nextVideo() {
  $("#videoarea").attr({
    "src": $("#playlist li").eq(+1).attr("movieurl"),

  });
}

#playlist {
  display: table;
}

#playlist li {
  cursor: pointer;
  padding: 8px;
}

#playlist li:hover {
  color: blue;
}

#videoarea {
  float: left;
  width: 100%;
  max-width: 1080px;
  height: 100%;
  max-height: 1920px;
  margin: 10px;
  border: 1px solid silver;
}