<video> 在其他浏览器中播放，但不是 Safari答案

【问题标题】：<video> plays in other browsers, but not Safari<video> 在其他浏览器中播放，但不是 Safari
【发布时间】：2015-02-27 01:12:56
【问题描述】：

我们的网站上有一个 MP4 视频；它在 IE9+、Firefox、Chrome 和 Mac 上的 Chrome 中运行良好。但是，在 Safari 上，视频根本不播放 - 它确实触发了“停顿”事件，然后没有加载。我会发布我们的 HTML，但我通过发现即使导航到原始 MP4 的 URL 也不会播放它来进一步追踪问题。下载并在本地播放后，该视频在 Quicktime 中运行良好。

在我们所有的开发人员中，最奇怪的是，当我从我的开发计算机运行相关服务器时，我可以让视频在 Safari 上运行。更重要的是，同一目录中的其他 MP4 文件也有类似的问题。这对我来说是关键，我一直在寻找视频从服务器传输的方式是否有任何细微差别——请求/响应标头、确切的文件大小等。

从 Chrome 复制的标题（只是因为 Safari 更难复制/粘贴）

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
DNT:1
Host:*************:8443
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36

Response Headers
Accept-Ranges:bytes
Content-Length:44875102
Content-Type:video/mp4;charset=UTF-8
Date:Tue, 30 Dec 2014 21:11:51 GMT
ETag:W/"44875102-1419959755000"
Last-Modified:Tue, 30 Dec 2014 17:15:55 GMT
Server:Apache-Coyote/1.1

（另外，以防万一这让您想起一个较旧的问题；我知道 Windows 上的 Safari 已经死了很长时间。这个问题发生在 OS X 上）

编辑：可能会有所帮助的新信息。我从我自己的网络服务器上拍摄了一段个人视频，该服务器可以在有问题的 Safari 浏览器上运行，并将其下载到我们服务器的本地视频目录中。 从那里，它遇到了与我们其他视频相同的问题。这表明 MP4 本身可能无关紧要 - 这可能是我们的 Tomcat 7 网络服务器的某种服务器问题。我们确实正确注册了 Content-Types，这至少涵盖了基础知识，但我很好奇是否还有其他必要的部分。

更多信息：我最初没想过要提及这一点，但我们正在通过 HTTPS 连接加载我们的网页和视频。我们的大多数测试服务器都没有有效的证书，因此我们需要单击标准浏览器警告“这台服务器可能不是它所说的那样”。我们现在正在研究如何在我们的所有服务器上拥有正确的证书。

【问题讨论】：

您能否提供出现此问题的视频的链接？
@AlexanderO'Mara 对不起，但没有；这是正在开发的产品的一部分。我会整理一个小示例小提琴，但似乎标题很可能是相关的，当然默认配置 Apache 服务器上正确编码视频的基本示例可以正常工作。
我尝试将我的本地服务器配置为提供具有相似标题的视频，但仍然无法重现它。除非我们能获得示例视频，否则我不确定我们能做些什么，只能猜测。
@AlexanderO'Mara 不幸的是，这是真的。我很难在一些小提琴中传递所有因素，比如典型的 JS 问题。我不认为有问题的 MP4 文件是问题的一个因素（我可能会重新测试这个想法，但我想我记得在其他视频文件中发现了类似的问题）。否则，可能与某些标头、特殊 HTTP 操作的服务器支持或 Safari 小修订等有关。
注意：自从我发布这个问题以来的一些发现； Safari 在使用自签名证书的页面上播放视频时可能会出现问题。在 Safari 中，您可以展开证书的详细信息并告诉它永久接受自签名证书，这可能会导致视频正常工作。此外，即使通过远程连接从服务器检索数据需要很长时间，stalled 事件也可能会触发。这可能对您有所帮助，也可能无济于事。

标签： html video safari mp4

【解决方案1】：

我在音频方面遇到了类似的问题。解决方案是将源标签添加到音频标签。您可以在您的情况下尝试以下方法：

<video loop controls='true' width='100%' height='100%'>      
   <source src='//some_video.mp4' type='video/mp4'>
</video>

【讨论】：

【解决方案2】：

就我而言，我需要从轨道标签中删除默认属性：

<track default kind='captions' />

万一其他人有这个问题。

【讨论】：

【解决方案3】：

Safari 和 iPhone 需要“范围”请求标头才能播放您的媒体内容。您必须在服务器端处理 Range。

        if (request.getHeader("Range") != null) {
            System.out.println("Inside range ");


            System.out.println("range value "+request.getHeader("range"));
        //  String fileLocation = melpUploadFiles.getFilethumbPath();
            resfilename=melpUploadFiles.getFilename();

            response.setStatus(206);
            String rangeValue = request.getHeader("range").trim().substring("bytes=".length());


            File fileloc= new File(melpUploadFiles.getFilePath());
             long fileLength = fileloc.length();
            long start, end;
            if (rangeValue.startsWith("-")) {
                end = fileLength - 1;
                start = fileLength - 1 - Long.parseLong(rangeValue.substring("-".length()));
            } else {
                String[] range = rangeValue.split("-");
                start = Long.parseLong(range[0]);
                end = range.length > 1 ? Long.parseLong(range[1]) : fileLength - 1;
            }
            if (end > fileLength - 1) {
                end = fileLength - 1;
            }
            if (start <= end) {

             System.out.println("inside  response block");

                long contentLength = end - start + 1;
                response.setHeader("Content-Length", contentLength + "");
                response.setHeader("Content-Range", "bytes " + start + "-" + end + "/" + fileLength);
                response.setHeader("Content-Type", "video/mp4");
                response.setHeader("Accept-Ranges","bytes");
                response.setHeader("ETag","\"a226e70476837efa4df4b4bfd75366c4\"");
                response.setHeader("Server", "Apache");
                response.setHeader("Last-Modified",System.currentTimeMillis()+"");
                response.setDateHeader("Expires", System.currentTimeMillis() + 604800000L);


            //  response.setHeader("Content-Disposition", "inline; filename="+resfilename+"");
                RandomAccessFile raf = new RandomAccessFile(fileloc, "r");
                raf.seek(start);
                output = response.getOutputStream();
                byte[] buffer = new byte[2096];
                int bytesRead = 0;
                long totalRead = 0;

                System.out.println("content length "+contentLength);

                while(totalRead<contentLength) {

                    bytesRead = raf.read(buffer);
                    totalRead += bytesRead;
                    output.write(buffer, 0, bytesRead);
                    }
            }
        }

否则 { 对于其他浏览器 }

【讨论】：

【解决方案4】：

刚刚遇到同样的问题。所有标题、范围等都是正确的。但是，我有一个结构很差的服务人员。所有其他浏览器都处理了该故障，而 Safari 则没有。暂时移除 service worker，一切恢复正常。

【讨论】：

【解决方案5】：

我上传了一个新的 MP4 文件，但它只能在 SAFARI 中播放（在我的 MAC 和 iPhone 上），不能在 Chrome、Oasis、Firefox 或 Brave 中播放。 HTML 代码与以前的成功相同。文件大小和尺寸都很好。但是旧的工作文件上的编解码器是“H.264，AAC”。新的不工作文件的编解码器是“MPEG-4，AAC”。我在 VideoPad 上编辑我的视频文件。所以我查看了“导出文件为”选项中的规范选择，果然，编解码器默认为 MPEG-4。我选择了 H.264 并导出了文件。上传到 AWS 并公开。在四个失败的浏览器和 BINGO! 中重试了我的新文件，它们都有效。有神！

【讨论】：

【解决方案6】：

如果您已经解决了这个问题，请原谅我！我在 Safari 中的服务器视频也遇到了同样的问题。我能够使用 POSTMAN/INSOMNIA 检查我的服务器发送的标头来解决这个问题。 Chrome 可能会欺骗您，一旦在此浏览器中视频可以正常播放！

如果视频不是范围的（完整的视频请求），您的服务器必须返回状态（200）并检查是否从您的服务器发送了“Accept-Ranges:bytes”。标头示例状态 200：

Server: nginx
Date: Wed, 25 Jul 2018 17:34:18 GMT
Content-Type: video/mp4
Content-Length: 22995782
Connection: keep-alive
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, PATCH, DELETE
Access-Control-Allow-Headers: X-Requested-With,content-type
Access-Control-Allow-Credentials: true
Accept-Ranges: bytes

如果视频是有范围的，您的服务器必须正确返回带有范围标头的状态 (206)。标头示例状态 206：

Server: nginx
Date: Wed, 25 Jul 2018 18:13:07 GMT
Content-Type: video/mp4
Content-Length: 1023
Connection: keep-alive
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, PATCH, DELETE
Access-Control-Allow-Headers: X-Requested-With,content-type
Access-Control-Allow-Credentials: true
Accept-Ranges: bytes
Content-Range: bytes 1-1023/22995782

希望对您有所帮助！我最诚挚的问候，保罗·杜尔索

【讨论】：

我的服务器会这样做。仍然无法在 Safari 上播放。

【解决方案7】：

我遇到了同样的问题并解决了它，但这里没有其他答案与我无关，所以我将在这里为后续的人提供解决方案。

我一直在制作自己的视频流服务器，在有问题的情况下，它只是返回一个“范围”的 mp4 文件，我发现 Safari 不播放 HTTP 响应中携带的视频，缺少“连接”响应标头某种原因。

【讨论】：

【解决方案8】：

最近，我的团队遇到了一个导致相同行为的特定问题。我们使用的是 Apache 2.4，并注意到如果我们启用了 .htpasswd 等身份验证层，即使在身份验证之后，Safari 也不会显示视频。就好像它不会继续为某些类型的后续 HTTP 请求提供初始身份验证许可。

抱歉，我没有更多的技术可以提供，但可以检查是否有人仅在 Safari 中遇到视频问题。

【讨论】：

【解决方案9】：

Safari 需要网络服务器支持“Range”请求标头才能播放您的媒体内容。

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6

对于合法的“范围”请求响应，您的 webserve 需要返回状态代码“206”。

【讨论】：

这是真的。这也意味着您必须添加额外的层（例如 Varnish 或 Nginx）或在应用程序代码中完全重新实现范围处理以动态生成或转换的内容。
“iOS 支持大于 2 GB 的电影”，同时由于这个奇怪的要求，它在播放 50kb 的 gif 视频时遇到问题......

【解决方案10】：

这确实可能是缺少字节范围支持的问题，具体取决于您使用的版本。它已添加到 MAGNOLIA-3855 中的 DMSDownloadServlet（Magnolia 修复版本 4.4.6）。

【讨论】：

【解决方案11】：

如果您将这些添加到您的 .htaccess 会发生什么？

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

【讨论】：

它不是 apache 服务器，所以不是 htaccess。不过，它确实通过其他配置文件具有 MIME 类型。
如果您将生成的 HTML 保存为 html 文件，并将其加载到 Safari 中（在修复任何损坏的 url 之后），它可以工作吗？
否；如果直接在浏览器中加载视频url，它甚至不起作用。
Safari 是流媒体 mime 类型的垃圾。它忽略 MIME 类型，而是查看文件扩展名。获得正确的 MIME 类型对其他浏览器有好处，但对 Safari 来说毫无意义。

【解决方案12】：

确保在您的 html 代码中给出了 controls='true' type='video/mp4'。

<video loop controls='true' width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

【讨论】：

嗯...据我所知，'controls' 是一个布尔属性，这意味着它不需要='true'，而且我所知道的任何资源都没有提到'type=etc' 属性视频标签。我从来没有给出我的 HTML 本身，但基本上我的 HTML 与你的非常相似，除了在视频中的 source 元素中定义的 src / 类型。
@Katana314 在大多数情况下我都同意你的看法，但在这个情况下不同意。
@huazihihao 同意什么？
结论是什么？有人让这个工作吗？
type="*" 是关键

【解决方案13】：

...

顺便说一句，charset 对 video/mp4 类型有任何意义吗？尝试删除其上的字符集。

编辑：是的，字符集可能是问题所在，请参阅：Specify content-type for documents uploaded in Magnolia

EDIT2：不是字符集，哎呀，阅读理解失败。可能是字节范围？引用：“[...] 我们发现 Safari/iOS “使用 HTTP 字节范围来请求音频和视频文件。”现在我们猜测 Magnolia DMS 文件服务不支持此功能，因此流式传输失败。”

【讨论】：

真正烦人的是我想要一种简单的方法来确认这一点，但是在 Safari 的开发者工具中，当我点击 MP4 文件的网络请求时，它错误地声称没有请求或响应标头。也许我会找到另一种验证方式。
没有测试链接的机会？如果需要，请私信我（twitter = @nexii）