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

您可以根据浏览器使用不同的文件名。有关通过嗅探用户代理检测Firefox的信息，请参阅Detect all Firefox versions in JS。

但是，最好检测浏览器是否可以显示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语句的内容。）

更改switch语句以包含mp4和ogg文件

1 个答案: