I am trying to create a simple block displaying an HTML5 video tag. I want the ability to play different videos along with their titles from a JSON file by using previous and next buttons. Clicking the next button should play the next video, and the same goes for the previous button.
For reference, here is a JSFiddle link: HTML5 video previous - next btns demo
This is what I have implemented 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>
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
});
However, I encountered the following error:
Uncaught TypeError: Cannot read property '0' of undefined
If you have any suggestions on how to fix this issue and achieve my desired functionality, please feel free to share. Your help is greatly appreciated. Thank you!