Question

我有一个带有HTML5视频标签的简单块，我想使用按钮prev和next播放JSON文件中标题不同的视频，当我单击next时，它应该播放下一个视频，同上一个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。

HTML5视频：未捕获的TypeError：无法读取未定义的属性“ 0”

1 个答案: