CODEWITHSUNDEEP
javascriptjquerycsshtml
The Dead Man
The Dead Man

Reputation: 5566

HTML5 video: Uncaught TypeError: Cannot read property '0' of undefined

I have a simple block with HTML5 video tag, I want to play different videos with its title from JSON file using buttons prev and next, when I click next it should play next video the same goes to prev btn.

Here is jsfiddle for reference: HTML5 video previous - next btns demo

Here is what I have so far

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>

Here is 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;
}

Here is 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


});

Unfortunately, I am getting the following error

 Uncaught TypeError: Cannot read property '0' of undefined

What do I need to change to get what I want? any help or suggestion will be appreciated thanks

Upvotes: 0

Views: 661

Answers (1)

Jack Bashford
Jack Bashford

Reputation: 44107

You're not assigning data a value from your AJAX call. Change some names to avoid scoping errors, and assign it like so:

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

As pointed out by @Louys Patrice Bessette in the comments, you now need to substitute myData for data everywhere else in your code.

Upvotes: 3

Related Questions