Html 无法加载资源,插件在 iOS 上处理加载

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18103103/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:56:03  来源:igfitidea点击:

Failed to Load Resource, Plugin Handled Load on iOS

htmliosapache

提问by CodeGeek123

Every time I try to view a video file on my server I get this error on iOS in Safari, Chrome.

每次我尝试在我的服务器上查看视频文件时,我都会在 Safari、Chrome 中的 iOS 上收到此错误。

I am using a blob server and then an Apache server so I am not sure what the problem is. However, when I only use Apache, I do get this error but then I have the video rendering too.

我使用的是 blob 服务器,然后是 Apache 服务器,所以我不确定问题是什么。但是,当我只使用 Apache 时,我确实收到了这个错误,但我也有视频渲染。

However when I render this using my server this is not working. Does anyone know why this is? The videos work fine on other devices and in browsers also works fine if accessed through Apache only.

但是,当我使用我的服务器渲染它时,这不起作用。有人知道为什么是这样吗?这些视频在其他设备上运行良好,如果仅通过 Apache 访问,则在浏览器中也可以正常运行。

回答by CodeGeek123

The solution to this problem was just a work around. The reason being the that blob servers aren't streaming servers. iOS devices expect the videos to arrive in small chunks. So for instance a streaming server is able to do this. However, a blob server just hands the video as a blob which is not what the iOS device expects. Some browsers are smart enough to handle this but others not.

这个问题的解决方案只是一种变通方法。原因是 blob 服务器不是流服务器。iOS 设备希望视频以小块形式到达。因此,例如流媒体服务器能够做到这一点。但是,blob 服务器只是将视频作为 blob 处理,这不是 iOS 设备所期望的。一些浏览器足够聪明来处理这个问题,但其他浏览器则不然。

The way I solved this was to add the video files outside of the blob server in a folder within the project and then render this through the Apache server instead of serving it via the actual blob server we were using. I hope this helps.

我解决这个问题的方法是在项目内的文件夹中添加 blob 服务器之外的视频文件,然后通过 Apache 服务器呈现它,而不是通过我们使用的实际 blob 服务器提供它。我希望这有帮助。

回答by My Stack Overfloweth

We were getting a similar error here. I thought it may have been the streaming issue since our video was hosted in blob storage on Azure. After setting up a Media Service for streaming, the video still didn't work. It turns out, the cause of the bug for us was Safari using a Service Worker. Below is some further explanation of what we found:

我们在这里遇到了类似的错误。我认为这可能是流媒体问题,因为我们的视频托管在 Azure 上的 blob 存储中。设置流媒体服务后,视频仍然无法播放。事实证明,我们的错误的原因是使用 Service Worker 的 Safari。以下是对我们发现的进一步解释:

Safari first sends a byte range request for a Video tag that expects a 206 response. However, if you use a Service worker, the response returns with a 200 and it appears Safari doesn't know how to handle this. Our solution was to exclude using a Service Worker for Safari.

Safari 首先为 Video 标签发送一个字节范围请求,期望得到 206 响应。但是,如果您使用 Service Worker,则响应返回 200,并且 Safari 似乎不知道如何处理此问题。我们的解决方案是排除在 Safari 中使用 Service Worker。

We found this by using the network tab of the Safari debugger on a Macbook to troubleshoot the issue we were seeing on the iPad. Attached is a screenshot for comparison/reference. The left tab shows what the call should look like by default. The right tab shows what you would see if using a Service Worker.

我们通过在 Macbook 上使用 Safari 调试器的网络选项卡解决我们在 iPad 上看到的问题发现了这一点。附上截图供比较/参考。左侧选项卡显示默认情况下调用的外观。右侧选项卡显示了使用 Service Worker 时您会看到的内容。

Safari Network Tab Service Workers

Safari Network Tab Service Workers

回答by anicepear

In our case, we created a URL pattern for our blob assets and then set headers in that URL pattern definition page which sent back a mime type of 'video/mp4'. This should instruct the browser to treat the binary stream as chunked, which in turn meant we didn't need to download the whole thing before it started playing.

在我们的例子中,我们为 blob 资产创建了一个 URL 模式,然后在该 URL 模式定义页面中设置标题,该页面发送回一个 mime 类型的“video/mp4”。这应该指示浏览器将二进制流视为分块,这意味着我们不需要在开始播放之前下载整个内容。

回答by Celso

I was also getting this error for some mp4 videos. Turns out it wasn't a server issue for me it was a video encoding issue.

对于某些 mp4 视频,我也收到此错误。原来这对我来说不是服务器问题,而是视频编码问题。

Issue

问题

A "moov atom" needs to be placed at the front of the video file. It serves as a table-of-contents for the video. That "moov atom" has to be read first for html streaming or it won't play on some devices.

需要在视频文件的前面放置一个“moov atom”。它用作视频的目录。对于 html 流媒体,必须首先读取“moov atom”,否则它不会在某些设备上播放。

The Fix

修复

To fix, I used handbraketo transcode my video. Turn on 'web optimize' Also turning on zerolatency and 'fast decode' may help (found in the video tab).

为了解决这个问题,我使用手刹对我的视频进行转码。打开“网络优化”同时打开零延迟和“快速解码”可能会有所帮助(在视频选项卡中找到)。

回答by youenn

@?ime Vidas, regarding:

@?ime Vidas,关于:

Our solution was to exclude using a Service Worker for Safari.

我们的解决方案是排除在 Safari 中使用 Service Worker。

As pointed out in https://bugs.webkit.org/show_bug.cgi?id=184447, the current workaround is to use Request.destination to bypass service workers for media loads.

正如https://bugs.webkit.org/show_bug.cgi?id=184447 中所指出的,当前的解决方法是使用 Request.destination 绕过 Service Worker 进行媒体加载。

回答by Teddy Michels

Google Cloud Platform Solution

谷歌云平台解决方案

This issue caused me a lot of headache, so I just wanted to add my specific solution here, if anyone else encounters this while deploying to Google Cloud Platform.

这个问题让我很头疼,所以我只想在这里添加我的具体解决方案,如果其他人在部署到 Google Cloud Platform 时遇到了这个问题。

When trying to load MP4 videos in Safari, I was getting the same error:

尝试在 Safari 中加载 MP4 视频时,我遇到了同样的错误:

"Failed to Load Resource, Plugin Handled Load"

“加载资源失败,插件处理加载”

Which was preventing the videos from playing.

这阻止了视频播放。

Still, I wanted to try to keep everything inside Google Cloud, so I created a Storage Bucket for the site, and added the videos there.

尽管如此,我还是想尝试将所有内容都保留在 Google Cloud 中,因此我为该站点创建了一个存储桶,并在其中添加了视频。

Of course, trying to retrieve the videos from the storage URL from the main site resulted in a CORS error. Fortunately, you can configure CORS pretty easily on storage buckets:

当然,尝试从主站点的存储 URL 中检索视频会导致 CORS 错误。幸运的是,您可以很容易地在存储桶上配置 CORS:

Configuring cross-origin resource sharing (CORS)

配置跨域资源共享(CORS)

Once that configuration was deployed, I was able to retrieve and load the videos on the site in Safari without the "plugin handled load" error.

一旦部署了该配置,我就能够在 Safari 中检索和加载站点上的视频,而不会出现“插件处理加载”错误。