Safari video tag not woking but does in all other browsers

Question

I have searched everywhere for the answer, and it seems no one has the correct answer.

My html5 video just refuses to work in safari (Mac, iPad, iPhone, basically all i-products)

    <video 
        poster="../images/poster.png"
        controls="true" style="width: 550px; height: auto;">
        <source 
            src="https://example.com/example.mp4" 
            type="video/mp4" />
        <source 
            src="https://example.com/example.webm" 
            type="video/webm" />
        <p innerHTML="Your browser doesn't support HTML5 video"></p>
    </video>

I tried the following:

• Autoplay
• Loop
• playsinline
• controls="true"
• added mimetypes
• mute
• preload
  • none
  • metadata
  • auto
• Checked the apple website on HTML video tag, followed it, but still nothing
• Added only the mp4 as source
• When I added a default source in the video tag, then I get a black screen with a strike-through play button
• response from the video = Accept-Ranges: bytes

poster is just obscured by red (copyright purposes)

When you click to play it, it just doesn't do anything, no playtime or anything. That image(obscured by red) is the poster...

Also, I tested if the server can handle partial byte ranges with:

curl --range 0-99 https://example.com/example.mp4 -o /dev/null

And it downloaded 100 bytes as expected. So the only thing that I saw different from Chrome, FF and all the other, was that they returned a 200 and safari returned a 206...

Not sure if that could be the problem. Another thing I tried was to create a XAMPP server and loaded it there with Apache and it worked perfectly. I have no idea why.

So other thing that I need to add is the following JQuery:

$("video").replaceWith(function() {
    var e = $(this);
    var imageSrc = e.attr("poster") || "poster.jpg";
    var type = e.find("source").attr("type");
    var sources = e.children("source");

    if (sources.length === 0) {
        sources.push(e.attr("src"));
    }

    var video = $("<video/>", {
        "poster" : imageSrc,
        "controls" : "true",
        "width": "550",
        "height": "auto"            
    })

    //  "preload": "auto",
    //  "loop" : true,
    //  "autoplay" : true,
    //  "id" : "bookVid"

    Array.from(sources).forEach(function(source) {
        video.append($("<source/>", {
            "src": source.src,
            "type": source.type
        }));
    })

    video.append($("<p/>", {
        "innerHTML": "Your browser doesn't support HTML5 video",
    }));

    return video;
});

The above code just replaces all videos on a page to the above video element (start of the question)

Not sure if the above JQuery is the problem. (Well for safari only)

Here are a few other solutions, but none worked for me:

HTML5 Video tag not working in Safari , iPhone and iPad

Answer 1

So in the end it wasn't my code or anything. It was the service worker we used (PWA). So for everyone who got the same problem as me, and couldn't find out why it doesn't want to work, you can follow this link.

self.addEventListener("fetch", function(event) {
    if (event.request.url.match(/\.(mp4)$/) && browser.safari) { // and the browser is safari
        return;
    }
}

So that .mp4 videos not get cached in safari.