I asked by someone to make a simple dashboard that show profiles video. The location of the videos is save in database, so i need to retrieve it first.
That's my code in index.php
<body onload="onload();">
<video style="border: 5px solid black" controls="" id="video" width="720" height="480" onended="onVideoEnded();">
</video>
<script>
var vid_list = [];
var list_index = 0;
var video_player = null;
function onload(){
console.log("body loaded");
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "get_location.php", true);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
vid_list = [];
for(var i = 0; i < data.length; i++){
vid_list.push(data[i].lokasi);
console.log(vid_list[i]); //running
}
}
}
for(var x = 0; x < vid_list.length; x++){
console.log(vid_list[x]);
}
video_player = document.getElementById("video");
video_player.setAttribute("src", vid_list[list_index]);
video_player.play();
}
function onVideoEnded(){
//console.log("video ended");
if(list_index < vid_list.length - 1){
list_index++;
}
else{
list_index = 0;
}
video_player.setAttribute("src", vid_list[list_index]);
video_player.play();
}
</script>
</body>
and this is get_location.php
<?php
$con = mysqli_connect("localhost","root","","video");
$sql = "SELECT * FROM video";
$result = mysqli_query($con,$sql);
$data = array();
while($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
echo json_encode($data);
?>
The problem is the video cannot be played, in the video screen i get message
Video Format or MIME type is not supported
and in browser console, a got this error message :
HTTP load failed with status 404. Load of media resource
http://localhost/video_autoplay/undefined failed.
But when i try to call a value like vid_list[1]; in the console, the value is exist, thats mean readyState = 4 and state = 200
can somebody help me ?
