duanjing2013 2018-01-14 11:27
浏览 61
已采纳

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

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 ?

  • 写回答

1条回答 默认 最新

  • dongyied24121 2018-01-16 05:16
    关注

    Done, I change the code to :

    <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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常
  • ¥15 关于风控系统,如何去选择