从数据库获取视频路径实现自动播放时遇404及MIME类型错误求助

嘿，我一眼就揪出核心问题了——AJAX的异步特性在这儿给你挖了个坑！先别急，咱们一步步来解决：

首先说你遇到的http://localhost/video_autoplay/undefined加载失败：你在onload函数里发起AJAX请求后，立刻就去设置视频src并播放，但AJAX是异步执行的啊！这时候请求还没返回，vid_list还是个空数组，vid_list[list_index]自然就是undefined，浏览器就会去请求一个叫undefined的资源，结果肯定是404。虽然你后面在AJAX回调里填充了vid_list，但这时候播放逻辑早就跑完了，根本没用到填充好的数据。

第一步：修复异步执行顺序问题 #

把初始化视频播放的代码移到AJAX的回调函数内部，确保只有当数据成功返回后，才去操作播放器：

修改后的onload函数代码：

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
            }
            // 把播放逻辑放到回调里，确保vid_list已经有数据
            video_player = document.getElementById("video");
            video_player.setAttribute("src", vid_list[list_index]);
            video_player.play();
        }
    }
}

这一步做完，404的问题应该就能解决了。

第二步：处理MIME类型不支持的问题 #

如果解决完404后，还是提示MIME类型错误，可以从这几个方向排查：

• 检查视频格式：确认你的视频是浏览器原生支持的格式（比如MP4/H.264、WebM、Ogg），冷门格式浏览器肯定不认。
• 配置服务器MIME类型：
  • 如果你用Apache，在项目根目录的.htaccess里添加：

    AddType video/mp4 .mp4
    AddType video/webm .webm
    AddType video/ogg .ogg
    

  • 如果你用Nginx，在站点配置文件里补充：

    types {
        video/mp4 mp4;
        video/webm webm;
        video/ogg ogg;
    }
    

• 确认视频路径有效性：检查vid_list里的路径是不是完整可访问的，比如视频存在http://localhost/video_autoplay/videos/目录下，路径要写全，别用错相对路径。

额外小优化 #

• 可以给播放器加个加载提示，避免用户盯着空白界面；
• 在onVideoEnded函数里加个判断，确保vid_list不为空再切换视频；
• 用addEventListener替代元素的onload、onended属性，代码会更健壮。

内容的提问来源于stack exchange，提问作者user9121190