javascript - 更改 switch 语句以包含 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

}

该脚本加载一个模式窗口，其中视频位于 Canvas 内。这适用于 Chrome 和其他浏览器。然而，Firefox 不能很好地处理 mp4 文件。想知道是否有办法修改以同时包含 mp4 和 ogg 文件。

感谢任何帮助。

Answer 1

您可以根据浏览器使用不同的文件名。请参阅Detect all Firefox versions in JS用于通过嗅探用户代理来检测 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 语句的内部内容。)