Changing switch statement to include both mp4 and ogg files

Question

I have a script (html5/js) that plays different videos depending on what the user selects

    })), 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

}

The script loads a modal window with the video inside a canvas. This works in Chrome and other browsers. However, Firefox does not handle mp4 files well. Wondering if there is a way to modify to include both mp4 and ogg files.

Any help is appreciated.

Answer 1

You can use a different filename based on the browser. See Detect all Firefox versions in JS for detecting Firefox by sniffing user agent.

However, it would be better to detect whether the browser can display MP4 video, rather than simply using user agent sniffing. Firefox may install a plugin to allow MP4; other browsers (e.g., Chromium) won't report as Firefox, but may not support MP4.

You can use the strategy from here to adapt your code: https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/H.264_support_in_Firefox

Create a utility checker function (caching the video element so we don't create a new video each time we call the function):

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

Then in your existing code: ...

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;

This could be further optimized depending on your file paths (e.g., if the ogg files are named exactly the same as the MP4 files except for the extension, you could simply determine the extension before the case statement and then append the appropriate extension in the body of your case statement.

(Please note that your code as posted doesn't look syntactically correct. I'm assuming that's an artifact of copy/paste, and focusing only on the guts of your switch statement.)