HTML5 video: Uncaught TypeError: Невозможно прочитать свойство '0' из неопределенного

Question

У меня есть простой блок с видео тегом HTML5, я хочу воспроизводить различные видео с его заголовком из файла JSON, используя кнопки prev и next, когда я нажимаю next, должно воспроизводиться следующее видео, то же самое происходит и в предыдущей btn.

Вот jsfiddle для справки: HTML5 видео предыдущий - следующий btns demo

Вот что у меня есть

HTML

        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div id="video-container">

<h1 class="movie-title">Movie title</h1>

   <video class="videoplayer" id="video-player_transformed"
                            playsinline autoplay muted>
 <source src="https://app.coverr.co/s3/mp4/Sand-Slow-Walk.mp4"
                                type="video/mp4">

   </video>

</div>

<div class="btns">
    <div class="prev">
           Prev
   </div>

   <div class="next">
           next
   </div>
 </div>

Вот css

body{
  background: gray;
}
#video-container{
position: relative;
  height: 314px;
  width: 800px;
  display: flex;
  justify-content: center;
   align-self: center;
   overflow: hidden;
}
.movie-title{
position: absolute;
top: 0px;
}

.btns{
  display: flex;
  justify-content: center;
}
.prev, .next{
  display: flex;
  width: 100px;
  height: 50px;
  background: red;
  margin: 20px;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
}
video{
height: 400px;
width: 400px;
}

Вот js

$(document).ready(function () {

            var data
            $.ajax({
              dataType: 'json',
              url: 'https://videomill-bot.audiencevideo.com/videoexplainer/videoexplainer/data/video.json',
              data: data,
              success: function(data) {
                console.log($('.videoplayer').append(data));

              },
            })


var player = document.querySelector('#videoplayer');
var i = 0;
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');

prev.addEventListener('click',function(){
    player.src = data[i == 0 ? data.length-- : i--];
    video.play();
},false);

next.addEventListener('click',function(){
    player.src = data[i ==data.length-- ? 0 : i++];
    video.play();
},false);

player.src = data[i];
player.play(); //init the video player


});

К сожалению, я получаю следующую ошибку

 Uncaught TypeError: Cannot read property '0' of undefined

Что мне нужно изменить, чтобы получитьчто я хочу?любая помощь или предложение будут оценены спасибо

Answer 1

Вы не присваиваете data значение из своего вызова AJAX. Измените некоторые имена, чтобы избежать ошибок при определении области, и назначьте их так:

var myData;
//...
success: function(data) {
  console.log($('.videoplayer').append(data));
  myData = data;
}

Как указано @ Louys Patrice Bessette в комментариях , теперь вам нужно заменить myData на data везде в вашем коде.