javascript - HTML5 视频 : Uncaught TypeError: Cannot read property '0' of undefined

Question

我有一个带有 HTML5 视频标签的简单 block ，我想使用 prev 和 next 按钮播放来自 JSON 文件的标题不同的视频，当我单击下一步时，它应该播放下一个视频，同样转到 prev btn。

这里是jsfiddle供引用: HTML5 video previous - next 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

您没有从 AJAX 调用中为 data 分配一个值。更改一些名称以避免范围界定错误，并像这样分配它:

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

正如 @Louys Patrice Bessette 指出的那样in the comments ，您现在需要用 myData 替换代码中其他地方的 data。