Javascript 自动播放从数据库检索到的位置的视频_Javascript_Php_Autoplay

Javascript 自动播放从数据库检索到的位置的视频

javascript php

Javascript 自动播放从数据库检索到的位置的视频,javascript,php,autoplay,Javascript,Php,Autoplay,有人要求我制作一个简单的仪表板，显示视频配置文件。视频的位置保存在数据库中，所以我需要先检索它。这是我在index.php <body onload="onload();"> <video style="border: 5px solid black" controls="" id="video" width="720" height="480" onended="onVideoEnded();"> </video> <scri

有人要求我制作一个简单的仪表板，显示视频配置文件。视频的位置保存在数据库中，所以我需要先检索它。这是我在

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>

<?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);
?>

问题是视频无法播放，在视频屏幕中我收到消息

不支持视频格式或MIME类型

在浏览器控制台中，a收到以下错误消息：

HTTP加载失败，状态为404。加载媒体资源

http://localhost/video_autoplay/undefined 失败。

但是当我尝试调用像

vid_list[1]这样的值时

在控制台中，该值存在，这意味着

readyState=4

和

state=200

有人能帮我吗？

完成后，我将代码更改为：

<body>
    <video style="border: 5px solid black" controls="" id="video" width="720" height="480" onended="onVideoEnded();">
    </video>
</body>
    <script>
        var vid_list = [];
        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
                }
                testing(vid_list);
            }
        }
        //console.log(vid_list);
        var list_index = 0;
        var video_player = null;
        function testing(param){
            console.log(param);
            // console.log("body loaded");
            video_player = document.getElementById("video");
            video_player.setAttribute("src", param[list_index]);
            console.log(list_index);
            console.log(param);
            video_player.play();
            video_player.volume = 0.30;
        }

        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();
        }
        //document.getElementById("txtHint").innerHTML = vid_list[2];
</script>


var vid_list=[]；
var xmlhttp=new XMLHttpRequest（）；
open（“GET”，“GET_location.php”，true）；
xmlhttp.send（）；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
var data=JSON.parse（this.responseText）；
视频列表=[]；
对于（变量i=0；i

将视频列表的console.log粘贴到此处。我需要查看您使用的参数。“未定义”文本是一条非常重要的线索“video_player.setAttribute（“src”，vid_list[list_index]）”，如果您的脚本位于，并且您调用数组索引超出范围，则这将是“”。添加console.log（“播放”+list_index）到统一的callArray[“视频/鸣人短片[AMV]-YouTube.MP4”，“视频/鸣人短片AMV-YouTube-Copy.MP4”，“视频/母子（Kushina和鸣人）（短片）-YouTube.MP4”），这是console.log（vid_list）的结果@dannyzb当我在readyState条件之后添加

else

时，如下：

if（this.readyState==4&&this.status==200）{var data=JSON.parse（this.responseText）；vid_list=[]；for（var i=0；i

console.log（“失败”）正在运行