使用JQuery切换HTML5 Video的src仅在Internet Explorer中报错

看起来你遇到的是IE对HTML5 Video动态更新Source元素的兼容性问题。虽然Chrome和Firefox能很好地处理重复修改<source>的src属性，但IE在这方面有已知的缺陷——即使你正确更新了src和type，它也可能无法重新识别视频的MIME类型，导致后续加载失败。

问题根源 #

你的代码复用了同一个<source>元素，每次切换视频时只是修改它的src属性。IE在第一次加载后会缓存这个元素的一些状态，后续更新src并调用load()时，它没有正确重置MIME类型的检测逻辑，从而抛出"Unknown MIME type"错误。

解决方案：重新创建Source元素 #

最可靠的解决方法是每次切换视频时，移除旧的<source>元素，创建一个新的<source>元素并添加到<video>中，而不是直接修改现有元素的src。这样可以强制IE重新识别视频的MIME类型。

修改你的ShowTutorial函数如下：

function ShowTutorial(heading, filepath) {
    $('#modalTutorial').modal({ backdrop: 'static', keyboard: false, show: true });
    $('#<%=lblTutorialAlertHeader.ClientID%>').text(heading);
    
    var player = document.getElementById('tutorialVideo');
    player.pause();
    
    // 移除旧的source元素
    $('#TutorialSource').remove();
    // 创建新的source元素
    var newSource = $('<source>', {
        id: 'TutorialSource',
        src: filepath,
        type: 'video/mp4'
    });
    // 将新source添加到video中
    $(player).prepend(newSource);
    
    player.load();
    player.play();
}

同时，调整HideTutorial函数，避免清空src导致的异常（直接暂停并重置视频即可，不需要清空source的src）：

function HideTutorial() {
    HideModals();
    var player = document.getElementById('tutorialVideo');
    player.pause();
    player.currentTime = 0; // 重置播放进度到开头
    // 不需要清空src，下次切换会重新创建source
}

另一种备选方案：直接修改Video的Src #

如果你不想每次都创建新的source元素，也可以直接设置<video>元素的src属性，同时指定type：

function ShowTutorial(heading, filepath) {
    $('#modalTutorial').modal({ backdrop: 'static', keyboard: false, show: true });
    $('#<%=lblTutorialAlertHeader.ClientID%>').text(heading);
    
    var player = document.getElementById('tutorialVideo');
    player.pause();
    
    // 直接设置video的src和type
    player.src = filepath;
    player.type = 'video/mp4';
    
    player.load();
    player.play();
}

这种方式也能绕过IE对<source>元素的缓存问题，因为直接操作video元素的属性会触发IE重新检测视频类型。

验证要点 #

• 确保你的MP4视频使用的是IE支持的编码格式（H.264视频编码 + AAC音频编码，这是IE对MP4的标准支持格式）。
• 测试时清除IE的缓存，避免旧的缓存文件干扰测试结果。

这样修改后，IE应该能正确处理每次视频切换，不会再出现MIME类型错误了。

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