HTML5 视频：未捕获类型错误：无法读取未定义的属性"0"

Question

>我有一个带有HTML5视频标签的简单块，我想使用上一个和下一个按钮播放JSON文件中带有其标题的不同视频，当我单击下一个时，它应该播放下一个视频，就像上一个btn一样。

以下是 jsfiddle 供参考：HTML5 视频 上一页 - 下一页 BTNS 演示

这是我到目前为止所拥有的

.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 在注释中指出的那样，您现在需要在代码中的其他位置用myData替换data。