Safari 视频标签不起作用，但在所有其他浏览器中都起作用答案

【问题标题】：Safari video tag not woking but does in all other browsersSafari 视频标签不起作用，但在所有其他浏览器中都起作用
【发布时间】：2019-11-27 04:52:54
【问题描述】：

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

我的 html5 视频在 safari（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>

我尝试了以下方法：

自动播放
循环
在线播放
controls="true"
添加了 mimetypes
静音
预加载
- 无
- 元数据
- 自动
查看了苹果网站的HTML视频标签，关注了，还是没有
仅添加了 mp4 作为源
当我在视频标签中添加默认来源时，我得到一个带有删除线播放按钮的黑屏
视频回复 = Accept-Ranges: bytes

海报被红色遮住了（版权目的）

当你点击播放它时，它什么也不做，没有播放时间或任何东西。那张图片（被红色遮住了）是海报……

另外，我测试了服务器是否可以处理部分字节范围：

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

它按预期下载了 100 个字节。所以我看到的与 Chrome、FF 和所有其他的唯一不同的是，它们返回了 200，而 safari 返回了 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;
});

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

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

这里有一些其他解决方案，但没有一个对我有用：

HTML5 Video tag not working in Safari , iPhone and iPad

【问题讨论】：

你经过这里了吗：html5 video not working on ipad
（没看到，更新了我的链接）
我的回复是Accept-Ranges: bytes，我把它添加到问题中

标签： javascript jquery html safari html5-video

【解决方案1】：

所以最后它不是我的代码或任何东西。这是我们使用的服务工作者（PWA）。所以对于和我有同样问题的每个人，并且找不到它为什么不工作的原因，你可以关注this链接。

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

这样 .mp4 视频就不会在 safari 中缓存。

【讨论】：