本地视频在Firefox无法循环播放但Chrome正常（JavaScript）

核心问题 #

通过JavaScript切换video元素源文件后，新本地视频在Firefox中出现未播放完成即卡顿、无法循环的问题，初始大体积视频正常，Chrome下功能完全正常。

可能原因 #

Firefox对视频资源的加载、状态管理逻辑与Chrome存在差异，直接修改src时，旧资源的残留状态或新资源未完全就绪就触发播放，会导致循环属性绑定失效、加载中断等异常；小体积视频的加载速度快，更容易触发这类时机相关的问题。

修复方案 #

1. 重置Video状态后再加载新源 #

修改src前先清空旧资源、重置播放状态，避免残留干扰：

function phase2(){ 
    // 重置视频状态
    rain.pause();
    rain.src = "";
    rain.load(); // 强制清空旧资源缓存
    
    // 设置新源并配置属性
    rain.src = "BloodRain2.0.mp4";
    rain.loop = true; // 优先设置循环属性
    rain.play();
    
    // 原有业务逻辑保持不变
    p2.style.display = "initial"; 
    p2.value = "Oh no...";
    phase2_tr = true;
    phase_def = 1.3;
    phase_mdef = 1.2;  
    
    setTimeout(() =>{
        p2.style.display = "none";
        document.getElementById("boss_img").src = "AKUMU2.0.jpeg";
        phase1_theme.pause();
        const phase2_theme = new Audio('phase2OST.mp3') 
        phase2_theme.play();
        phase2_theme.loop = true;
        roar.play();
        roar.loop = false;
        document.getElementById("boss_name").innerHTML = "Akumu, Origin of the Nightmare";

        ostbox.value = "Now playing: \n Bloodborne OST: The Hunter - Phase 2";
    }, 4000);
    setTimeout(()=>{
        const xtraThunder = new Audio("xtrathunder.mp3")
        xtraThunder.play();
        xtraThunder.loop = true;
    }, 5000);
}

2. 监听加载完成事件再触发播放 #

确保视频资源完全就绪后再播放，避免时机问题：

function phase2(){ 
    rain.pause();
    rain.src = "";
    rain.load();

    rain.src = "BloodRain2.0.mp4";
    rain.loop = true;
    
    // 监听资源加载完成事件
    rain.addEventListener('loadeddata', function() {
        rain.play();
        // 移除事件避免重复触发
        rain.removeEventListener('loadeddata', arguments.callee);
    });
    
    // 原有业务逻辑...
}

3. 检查视频编码兼容性 #

Firefox对部分MP4编码格式支持有限，可使用HandBrake等工具重新转码视频：

• 视频编码：H.264 (Main Profile)
• 音频编码：AAC-LC
• 缩短关键帧间隔，避免因关键帧缺失导致卡顿

验证顺序 #

优先尝试方案1（重置状态），若问题仍存在，再用方案2确保播放时机；若以上均无效，排查视频编码兼容性问题。

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