Failed to Load Resource, Plugin Handled Load on iOS
每次我尝试在我的服务器上查看视频文件时,我都会在 iOS 上的 Safari、Chrome 中收到此错误。
我使用的是 blob 服务器,然后是 Apache 服务器,所以我不确定问题出在哪里。但是,当我只使用 Apache 时,我确实收到了这个错误,但是我也有视频渲染。
但是,当我使用我的服务器渲染它时,它不起作用。有人知道为什么是这样吗?如果仅通过 Apache 访问,这些视频在其他设备上运行良好,在浏览器中也运行良好。
这个问题的解决方案只是一种变通方法。原因是 blob 服务器不是流服务器。 iOS 设备希望视频以小块的形式出现。因此,例如流媒体服务器能够做到这一点。但是,blob 服务器只是将视频作为 blob 处理,这不是 iOS 设备所期望的。有些浏览器足够聪明,可以处理这个问题,但其他浏览器则不然。
我解决这个问题的方法是将视频文件添加到项目内的一个文件夹中的 blob 服务器之外,然后通过 Apache 服务器呈现它,而不是通过我们使用的实际 blob 服务器提供它。我希望这有帮助。
我们在这里遇到了类似的错误。我认为这可能是流媒体问题,因为我们的视频托管在 Azure 上的 blob 存储中。设置流媒体服务后,视频仍然无法播放。事实证明,对我们来说,这个 bug 的原因是 Safari 使用了 Service Worker。下面是对我们发现的一些进一步的解释:
Safari 首先为视频标签发送一个字节范围请求,该标签需要 206 响应。但是,如果您使用 Service Worker,则响应返回 200,并且 Safari 似乎不知道如何处理这个问题。我们的解决方案是排除对 Safari 使用 Service Worker。
我们通过在 Macbook 上使用 Safari 调试器的网络选项卡来解决我们在 iPad 上看到的问题时发现了这一点。附件是用于比较/参考的屏幕截图。左侧选项卡显示默认情况下调用的外观。右侧选项卡显示使用 Service Worker 时您会看到的内容。
对于一些 mp4 视频,我也遇到了这个错误。原来这对我来说不是服务器问题,而是视频编码问题。
问题
需要在视频文件的前面放置一个”moov atom”。它用作视频的目录。必须首先读取”moov atom”以进行 html 流式传输,否则它不会在某些设备上播放。
修复
为了解决这个问题,我使用 handbrake 对我的视频进行了转码。打开”网络优化”也打开零延迟和”快速解码”可能会有所帮助(在视频标签中找到)。
将以下代码行添加到您的 .htaccess(位于 WordPress 安装的根目录中):
1
|
SetEnvIfNoCase Request_URI .(?:mp4)$ no-gzip dont-vary
|
以下截图是新的完整的.htaccess
参考:https://clickshepherd.com/blog/solved-elegant-themes-divi-and-cloudflare-mp4-media-error-formats-not-supported-or-sources-not-found/
谷歌云平台解决方案
这个问题让我很头疼,所以我只想在这里添加我的具体解决方案,如果其他人在部署到谷歌云平台时遇到这个问题。
尝试在 Safari 中加载 MP4 视频时,我遇到了同样的错误:
“加载资源失败,插件处理加载”
这是阻止视频播放的原因。
不过,我想尝试将所有内容都保存在 Google Cloud 中,因此我为该网站创建了一个存储桶,并将视频添加到那里。
当然,尝试从主站点的存储 URL 中检索视频会导致 CORS 错误。
幸运的是,您可以在存储桶上轻松配置 CORS:
配置跨域资源共享 (CORS)
部署该配置后,我可以在 Safari 中检索和加载网站上的视频,而不会出现”插件处理加载”错误。
在我们的例子中,我们为我们的 blob 资产创建了一个 URL 模式,然后在该 URL 模式定义页面中设置标题,该页面发送回一个 mime 类型的”video/mp4″。这应该指示浏览器将二进制流视为分块,这反过来意味着我们不需要在开始播放之前下载整个内容。
我看到了”加载资源失败”错误,尽管这是我的视频无法播放的原因。
原来,我的视频缺少
在我的情况下,问题与 H256 HEVC 视频有关,但在你的情况下,可能是其他一些编码/标记问题。
就我而言,问题已通过 ffmpeg:
得到解决
1
|
ffmpeg -i input.mp4 -tag:v hvc1 -acodec copy -c:v copy -movflags faststart out.mp4
|
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/268588.html