Safari视频代码无法正常运行，但在所有其他浏览器中都可以正常运行

Question

我到处都在寻找答案，似乎没有人找到正确的答案。

我的html5视频只是拒绝在野生动物园（Mac，iPad，iPhone， i产品）

    <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>

我尝试了以下操作：

• 自动播放
• 循环
• playsinline
• controls =“ true”
• 添加了模仿类型
• 静音
• 预载
  • 无人
  • 元数据
  • 自动
• 在HTML视频标签上检查了苹果网站，但没有进行任何操作
• 仅将mp4添加为源
• 当我在视频代码中添加默认来源时，然后出现带删除线播放按钮的黑屏
• 来自视频的回复= Accept-Ranges: bytes

海报只是被红色遮盖（出于版权目的）

单击以播放时，它什么都不做，没有播放时间，也没有任何内容。那张被红色遮住的图像是海报...

我还测试了服务器是否可以通过以下方式处理部分字节范围：

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

它按预期下载了100个字节。因此，我看到的唯一与Chrome，FF和其他所有功能不同的地方是，它们返回了200，而野生动物园返回了206 ...

不确定是否可能是问题所在。我尝试的另一件事是创建一个XAMPP服务器，并用Apache将其加载到那里，并且运行良好。我不知道为什么。

所以我需要添加的其他东西是以下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;
});

上面的代码只是将页面上的所有视频替换为上面的video元素（问题的开始）

不确定上面的JQuery是否是问题。 （仅适用于野生动物园）

以下是其他一些解决方案，但没有一个对我有用：

HTML5 Video tag not working in Safari , iPhone and iPad

Answer 1

最后，这不是我的代码或任何东西。这是我们使用的服务人员（PWA）。 因此，对于每个与我有相同问题并且无法找出为什么它不起作用的人，您都可以点击this链接。

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

因此.mp4视频不会被存储在野生动物园中。