How to Dynamically Load and Play Videos Based on Browser Compatibility Using JavaScript

Introduction

In web development, ensuring a smooth video playback experience across different browsers can be challenging due to format compatibility issues. Some browsers support WebM, while others, like Safari, require MP4 (or MOV). In this guide, we’ll learn how to dynamically load and play videos based on browser compatibility using JavaScript.

Why Browser Compatibility Matters for Videos

• Different browsers support different video formats.
• Safari does not support WebM, while Chrome and Firefox do.
• Ensuring a seamless user experience requires dynamically setting the correct video format.

Step-by-Step Guide to Implementing Browser-Compatible Videos

1. Setting Up the HTML Structure

Create a <video> element with a <source> inside it:

<video id="heroVideo" muted playsinline style="width:100%; height:500px">
    <source id="videoSource" src="" type="video/webm">
</video>

2. JavaScript to Detect Browser and Load Correct Video Format

The following JavaScript code detects whether the browser is Safari and updates the video source accordingly:

document.addEventListener("DOMContentLoaded", function () {
    const videoElement = document.getElementById("heroVideo");
    const sourceElement = document.getElementById("videoSource");

    const webmPath = "https://your-webm-file-path.webm";
    const movPath = "https://your-mov-file-path.mov";

    // Detect Safari browser
    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

    if (isSafari) {
        sourceElement.src = movPath;
        sourceElement.type = "video/mp4"; // MOV is often recognized as MP4 in Safari
    } else {
        sourceElement.src = webmPath;
        sourceElement.type = "video/webm";
    }

    // Load and play the video with a slight delay
    videoElement.load();
    setTimeout(() => {
        videoElement.play();
    }, 500);
});

3. Explanation of the Code

• Detecting Safari: We use navigator.userAgent to check if the browser is Safari.
• Dynamically Setting the Video Source: If Safari is detected, we load the MOV (or MP4) file. Otherwise, we load the WebM file.
• Delayed Playback: A slight delay (500ms) ensures the video starts smoothly.

Benefits of This Approach

✅ Works on all modern browsers.
✅ Automatically loads the correct video format.
✅ Ensures a seamless user experience.

Conclusion

Handling video compatibility issues is crucial for a smooth web experience. Using this JavaScript-based approach, you can ensure that your videos play correctly on all browsers without requiring users to install additional plugins or software.