更改开关语句以同时包含mp4和ogg文件

Question

我有一个脚本(html5/js)，播放不同的视频取决于什么用户选择

    })), this.videoButton.addEventListener("mousedown", this.showVideo.bind(this)), this.videoButton.addEventListener("mouseover", _global.showPointer.bind(this)), this.videoButton.addEventListener("mouseout", _global.resetPointer.bind(this)), _global.videoFile) {
        case "mindful":
            this.videoFile = "video/vezo_mindful.mp4";
            break;
        case "sad":
            this.videoFile = "video/vezo_sad.mp4";
            break;
        case "ecstatic":
            this.videoFile = "video/vezo_ecstatic.mp4";
            break;
        case "goodMorning":
            this.videoFile = "video/vezo_goodMorning.mp4"
    }
    this.videoElement.ended = !1, this.videoElement.currentTime = 0, this.addEventListener("update", this.updateVideo.bind(this)), this.allowInput = !1, this.continueButton.visible = !1
}

脚本加载一个模态窗口，视频在画布中。这适用于Chrome和其他浏览器。但是，Firefox不能很好地处理mp4文件。想知道是否有一种方法来修改包括mp4和ogg文件。

Answer 1

您可以根据浏览器使用不同的文件名。参见在JS中检测所有Firefox版本，通过嗅探用户代理来检测Firefox。

然而，它会更好地检测浏览器是否可以显示MP4视频，而不是简单地使用用户代理嗅探。Firefox可能会安装一个插件来支持MP4;其他浏览器(例如，Chromium)不会报告为Firefox，但可能不支持MP4。

您可以使用此处的策略来调整您的代码:https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/H.264_support_in_Firefox

创建一个实用程序检查器函数(缓存视频元素，这样我们就不会每次调用该函数时都创建一个新视频):

var mp4VideoChecker = document.createElement('video');
function canPlayH264() {
    return !!(mp4VideoChecker.canPlayType && mp4VideoChecker.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
};

然后在你现有的代码中:…

case "mindful":
    this.videoFile = canPlayH264() ? "video/vezo_mindful.mp4" : "path/to/ogg/video";
    break;
case "sad":
    this.videoFile = canPlayH264() ? "video/vezo_sad.mp4" : "path/to/ogg/video";
    break;
case "ecstatic":
    this.videoFile = canPlayH264() ? "video/vezo_ecstatic.mp4" : "path/to/ogg/video";
    break;
case "goodMorning":
    this.videoFile = canPlayH264() ? "video/vezo_goodMorning.mp4" : "path/to/ogg/video";
    break;

这可以根据您的文件路径进一步优化(例如，如果ogg文件的命名与MP4文件完全相同，除了扩展名之外，您可以简单地在case语句之前确定扩展名，然后在case语句的主体中添加适当的扩展名。

(请注意，你的代码张贴看起来不正确的语法。我假设这是复制/粘贴的产物，并且只关注您的switch语句的核心)