移动端无法渲染Video元素但桌面端正常的技术求助

核心问题总结 #

桌面端能加载视频但移动端失败，主要原因包括路径解析错误、跨域限制、视频格式兼容性以及代码中的变量错误。

具体修复步骤 #

1. 修复NodeJS服务中的变量与响应头错误 #

你的Node代码存在hostname自赋值错误，且未处理跨域请求，导致移动端浏览器可能拦截响应：

import fs from 'fs';
import http from 'http'

function getFilePaths(dir){
    const files = fs.readdirSync(dir);
    // 替换为树莓派的实际局域网IP，比如192.168.1.100
    const baseVideoUrl = 'http://192.168.1.100/Videos/';
    // 对文件名编码，避免空格/特殊字符导致路径失效
    const filePaths = files.map((file)=> baseVideoUrl + encodeURIComponent(file));
    return {filepaths:filePaths};
}

function main(){
    // 替换为树莓派的实际局域网IP
    const hostname = '192.168.1.100';
    const port = 3000; 
    const server = http.createServer((req, res)=>{
        res.statusCode = 200;
        // 添加CORS头，允许跨域请求
        res.setHeader('Access-Control-Allow-Origin', '*');
        // 设置正确的JSON响应类型
        res.setHeader('Content-Type', 'application/json');
        res.end(JSON.stringify(getFilePaths('./Videos')));
    });
    server.listen(port, hostname, ()=>{
        console.log(`Server starting at http://${hostname}:${port}`);
    })
}

main()

2. 修正HTML中的Fetch地址 #

将HTML中fetch的占位符hostname替换为树莓派的实际IP：

async function main(){
    // 替换为Node服务的实际地址
    const filepathsRes = await fetch('http://192.168.1.100:3000');
    const filepathsObj = await filepathsRes.json();
    const vidElements = filepathsObj.filepaths.map((filepath)=>createVidElement(filepath));
    addChildElements(videoContainer, vidElements);
}

3. 为Video Source添加格式类型 #

移动端浏览器对视频格式的识别更严格，需明确指定type属性：

function createVidElement(src){
    const videoElement = document.createElement('video');
    videoElement.controls = true;
    const sourceElement = document.createElement('source');
    sourceElement.src = src;
    // 根据视频格式设置对应type，比如mp4用video/mp4，webm用video/webm
    sourceElement.type = 'video/mp4';
    videoElement.appendChild(sourceElement);
    return videoElement;
}

4. 验证视频格式兼容性 #

确保视频采用移动端通用编码格式：

• 优先使用H.264编码的MP4（几乎所有设备支持）
• 避免MKV、AVI等桌面端兼容但移动端支持有限的格式
• 可通过FFmpeg转换格式：ffmpeg -i input.mkv -c:v libx264 -c:a aac output.mp4

额外检查项 #

• 确认Apache的Videos目录权限正确，允许所有局域网设备访问
• 移动端设备与树莓派处于同一局域网
• 移动端浏览器未开启代理/VPN，确保能访问局域网IP

内容的提问来源于stack exchange，提问作者Elie Ariza Sosa