Html <video> 可在其他浏览器中播放，但不能在 Safari 中播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27712778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<video> plays in other browsers, but not Safari
提问by Katana314
We have an MP4 video on our site; it plays fine in IE9+, Firefox, Chrome, and Chrome on mac. However, on Safari, the video doesn't play at all - it does trigger a "stalled" event and then nothing loads. I would post our HTML, but I traced the problem further by finding that Safari wouldn't play it even when navigating to the original MP4's URL. When downloaded and played locally, the video works fine in Quicktime.
我们的网站上有一个 MP4 视频；它在 IE9+、Firefox、Chrome 和 mac 上的 Chrome 中运行良好。但是，在 Safari 上，视频根本无法播放 - 它确实触发了“停滞”事件，然后没有加载任何内容。我会发布我们的 HTML，但我通过发现即使导航到原始 MP4 的 URL Safari 也不会播放它来进一步追踪问题。在本地下载和播放时，视频在 Quicktime 中运行良好。
The weirdest part of this is that of all our developers, Ican get the video to work on Safari when I run the related server from my development computer. What's more, other MP4 files in the same directory have a similar problem. This has been the key to me, and I've been searching for any little difference in the way the videos transfer from the server - request/response headers, exact filesize, etc.
最奇怪的部分是我们所有的开发人员，当我从我的开发计算机运行相关服务器时，我可以让视频在 Safari 上工作。更何况，同一目录下的其他MP4文件也有类似的问题。这对我来说很关键，我一直在寻找视频从服务器传输的方式的任何细微差别 - 请求/响应标头、确切的文件大小等。
Headers copied from Chrome (only since Safari is harder to copy/paste from)
从 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
(Also, just in case this reminds you of an older issue; I'm aware Safari on Windows has been dead for ages. This issue is occurring on OS X)
（另外，以防万一这让您想起一个较旧的问题；我知道 Windows 上的 Safari 已经死了很长时间了。这个问题发生在 OS X 上）
EDIT: New info that might help a bit. I took a personal video from my own webserver, which was able to work from there on the problematic Safari browsers in question, and downloaded it to our server's local video directory. From there, it encounters the same issue as our other videos. This suggests to me that the MP4 itself may not matter - this is probably a server issue of some sort with our Tomcat 7 webserver. We do have the Content-Types registered correctly, which at least covers the basics, but I am curious if there are other necessary parts.
编辑：可能会有所帮助的新信息。我从我自己的网络服务器上获取了一个个人视频，该视频能够在有问题的 Safari 浏览器上工作，并将其下载到我们服务器的本地视频目录中。从那里，它遇到了与我们的其他视频相同的问题。这向我表明 MP4 本身可能无关紧要 - 这可能是我们的 Tomcat 7 网络服务器的某种服务器问题。我们确实正确注册了 Content-Types，这至少涵盖了基础知识，但我很好奇是否还有其他必要的部分。
MORE INFO: I didn't think to mention this initially, but we are loading our webpages and videos over an HTTPS connection. Most of our test servers do not have valid certificates, and so we need to click through the standard browser warning that "This server might not be who it says". We are now looking into what it would take to have correct certificates on all our servers.
更多信息：我最初没想到要提及这一点，但我们正在通过 HTTPS 连接加载我们的网页和视频。我们的大多数测试服务器都没有有效的证书，因此我们需要单击标准浏览器警告“此服务器可能不是它所说的那样”。我们现在正在研究如何在我们的所有服务器上拥有正确的证书。
回答by Reeve Lau
回答by David Shoup
I uploaded a new MP4 file, but it played in SAFARI only (on both my MAC and my iPhone), not Chrome, Oasis, Firefox, or Brave. HTML code was identical to previous successes. File size and Dimensions were fine. But the Codecs on the old, working files were "H.264, AAC". The Codecs on the new, not working files were "MPEG-4, AAC". I edit my video files on VideoPad. So I looked at the specification selections on the "Export file as" options, and, sure enough, the Codecs was defaulted to MPEG-4. I selected H.264 and exported the file. Uploaded to AWS and made public. Retried my new files in the four failure browsers and BINGO!, they all worked. There is a God!
我上传了一个新的 MP4 文件，但它只能在 SAFARI 中播放（在我的 MAC 和我的 iPhone 上），而不是 Chrome、Oasis、Firefox 或 Brave。HTML 代码与以前的成功相同。文件大小和尺寸很好。但是旧的工作文件上的编解码器是“H.264，AAC”。新的非工作文件的编解码器是“MPEG-4，AAC”。我在 VideoPad 上编辑我的视频文件。因此，我查看了“导出文件为”选项中的规范选择，果然，编解码器默认为 MPEG-4。我选择了 H.264 并导出了文件。上传到 AWS 并公开。在四个失败的浏览器和 BINGO! 中重试了我的新文件，它们都有效。有神！
回答by Chris LaChance
Just ran into the same issue. All headers, range, etc. were correct. However, I had a poorly constructed service worker. All other browsers handled the failure, Safari did not. Temporarily removed the service worker, and things are back to normal.
刚刚遇到了同样的问题。所有标题、范围等都是正确的。但是，我的服务人员结构很差。所有其他浏览器都处理了故障，Safari 没有。暂时移除了 service worker，一切恢复正常。
回答by user667
This could indeed be an issue of missing byte-range support, depending on the version you are using. It was added to the DMSDownloadServlet in MAGNOLIA-3855(Magnolia fix version 4.4.6).
这确实可能是缺少字节范围支持的问题，具体取决于您使用的版本。它已添加到MAGNOLIA-3855（Magnolia 修复版本 4.4.6）中的 DMSDownloadServlet 。
回答by John Hua
Make sure controls='true' type='video/mp4' is given in your html code.
确保在您的 html 代码中提供了 controls='true' type='video/mp4'。
<video loop controls='true' width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
回答by neokio
What happens if you add these to your .htaccess?
如果将这些添加到您的.htaccess?
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
回答by Nexii Malthus
...
...
On a side note, does charset make any sense on the video/mp4 type at all? Try removing the charset on it.
附带说明一下，字符集对视频/mp4 类型有任何意义吗？尝试删除其上的字符集。
EDIT: Yes, charset might be the problem, see: Specify content-type for documents uploaded in Magnolia
编辑：是的，字符集可能是问题所在，请参阅：指定在 Magnolia 中上传的文档的内容类型
EDIT2: Not charset, woops, reading comprehension fail. Might be byte range? To quote: "[...] we found out that Safari/iOS "uses HTTP byte-ranges for requesting audio and video files." Now we guess that the Magnolia DMS file serving doesn't support this feature, and hence the streaming fails."
EDIT2：不是字符集，糟糕，阅读理解失败。可能是字节范围？引用：“[...] 我们发现 Safari/iOS“使用 HTTP 字节范围来请求音频和视频文件。”现在我们猜测 Magnolia DMS 文件服务不支持此功能，因此流式传输失败了。”
回答by RedYetiCo
Recently, my team ran into a particular issue that resulted in the same behavior. We were using Apache 2.4 and noticed that if we had an authentication layer such as .htpasswd enabled, Safari would not display videos at all even after authenticating. It's almost as if it does not continue to honor the initial authentication clearance for certain types of subsequent HTTP requests.
最近，我的团队遇到了导致相同行为的特定问题。我们使用的是 Apache 2.4，并注意到如果我们启用了诸如 .htpasswd 之类的身份验证层，即使经过身份验证，Safari 也根本不会显示视频。就好像它不会继续为某些类型的后续 HTTP 请求提供初始身份验证许可。
Sorry I don't have anything more technical to provide, but it's something to check for anyone experiencing video issues only in Safari.
抱歉，我没有更多技术可以提供，但可以检查是否有人仅在 Safari 中遇到视频问题。
回答by findall
I ran into the same problem and solved it but no other answer here is not involved to mine, so I'll remain the solution here for someone following.
我遇到了同样的问题并解决了它，但这里没有其他答案不涉及我的问题，所以我将在这里为后续的人提供解决方案。
I've been making my own video streaming server, which, in the questioned case, simply returns a "Ranged" mp4 file, and I found Safari does not play video carried in HTTP response lacking of "Connection" response header for some reason.
我一直在制作自己的视频流服务器，在有问题的情况下，它只返回一个“Ranged”mp4 文件，我发现 Safari 不播放 HTTP 响应中携带的视频，因为某些原因缺少“Connection”响应标头。
回答by Paulo Sérgio Dur?o
Please, forgive me if you already solve this issue! I've had the same problem with my server videos in Safari. I was abled to solve this using POSTMAN/INSOMNIA for check the headers that my server is sending. Chrome may can trick your, once that in this browser the video works fine!
如果你已经解决了这个问题，请原谅我！我在 Safari 中的服务器视频也遇到了同样的问题。我能够使用 POSTMAN/INSOMNIA 检查我的服务器发送的标头来解决这个问题。Chrome 可能会欺骗您，一旦在此浏览器中视频工作正常！
If the video is not ranged(full video request) your server must return status(200) and check it out if the 'Accept-Ranges:bytes' is sent from your server. Header sample status 200:
如果视频不在范围内（完整视频请求），您的服务器必须返回 status(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
if the video is ranged your server must return status(206) with range headers correctly. Header sample status 206:
如果视频是范围的，您的服务器必须正确返回带有范围标题的状态（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
I hope this help you! my best regards, Paulo Dur?o
我希望这对你有帮助！我最好的问候，Paulo Dur?o
