如何修复VideoJS添加多视频源时出现的播放报错问题

核心错误原因 #

你当前的代码通过手动拼接字符串生成源配置，最终传给player.src()的是字符串格式的数据，而VideoJS要求传入的是由对象组成的原生JS数组，播放器无法识别字符串格式的源配置，因此抛出无兼容源的报错。同时你的代码还存在变量命名冲突、冗余序列化、部分画质缺失时变量未定义的问题。

修复后的完整代码 #

var href = location.href;
var data = new FormData();
data.append("im", href);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/json.php");
xhr.responseType = 'json';
xhr.onload = function() {
    // 去掉冗余的序列化操作，response已经是json对象
    const response = this.response;
    const obj = JSON.parse(response.flashvars.metadata);
    const videoList = obj.videos;
    // 初始化空数组存储源配置，不用拼接字符串
    const sources = [];
    // 定义画质名称和配置的映射，避免冗长的if判断
    const qualityMap = {
        "mobile": {label: '144p', res: 144},
        "lowest": {label: '240p', res: 240},
        "low": {label: '360p', res: 360},
        "sd": {label: '480p', res: 480},
        "hd": {label: '720p', res: 720},
        "full": {label: '1080p', res: 1080},
        "quad": {label: '2k', res: 2048},
        "ultra": {label: '4k', res: 4096}
    };
    // 遍历视频列表生成源对象
    for (let i = 0; i < videoList.length; i++) {
        const url = videoList[i].url;
        const name = videoList[i].name;
        if (qualityMap[name]) {
            sources.push({
                src: url,
                type: 'video/mp4',
                label: qualityMap[name].label,
                res: qualityMap[name].res
            });
        }
    }
    const player = videojs('player');
    // 直接传入源数组，不要套额外的数组或者转字符串
    player.src(sources);
};
xhr.send(data);

关键修改点 #

• 取消手动拼接字符串的逻辑，直接初始化空数组存储源对象，避免字符串转对象的额外操作和语法错误
• 新增画质映射表替代冗长的if else判断，减少冗余代码，避免变量命名冲突
• 移除了不必要的JSON.parse(JSON.stringify())冗余序列化操作，直接操作原生对象
• 避免了部分画质不存在时变量未定义的问题，数组会自动只存入存在的画质配置
• 修正了player.src()的传参格式，直接传入原生数组对象

内容的提问来源于stack exchange，提问作者Sajedul Islam Sakib