three.js 🚀 - 用于流式处理视频纹理的 Safari/Firefox DOM 异常 18

颠倒的问题是问题的一部分吗？

screen shot 2016-02-12 at 11 00 53

mrdoob 于 2016-02-12

颠倒不是问题的一部分。那是我懒了>_<

jonobr1 于 2016-02-12

我可以在这里重现。你试过有一个中间画布吗？

mrdoob 于 2016-02-12

：+1：，中间像画布2d？

jonobr1 于 2016-02-12

是的，使用画布 2d 作为纹理并将视频的 drawImage 绘制到它上面。

mrdoob 于 2016-02-12

~~我现在就这样做。~~ https://dl.dropboxusercontent.com/u/1595444/shaka-player/shaka-canvas.html

jonobr1 于 2016-02-12

看起来在 Safari 中没有DOM Exception 18抛出，但图像没有传输。与 Firefox 相同。这是否意味着它是浏览器实现的事情？

jonobr1 于 2016-02-12

面临同样的问题。 Safari 抛出 Dom Exception 18，Firefox 不加载图像但也未显示任何错误。 @jonobr1您在 Firefox 中遇到任何错误吗？

tahasabih 于 2016-02-12

Firefox 中没有错误，但也没有图像。我将使用 WebKit 提交错误
和 Mozilla，看看是否有任何额外的信息出现。

我不了解你们，但我还没有看到任何流媒体视频的演示
上传到 WebGL 纹理。也许有一个以 YouTube 为来源的？
2016 年 2 月 11 日星期四晚上 11:11 Taha Sabih [email protected]
写道：

面临同样的问题。 Safari 抛出 Dom Exception 18，Firefox 没有
加载图像，但也没有显示错误。 @jonobr1
https://github.com/jonobr1您在 Firefox 中遇到任何错误吗？
—
直接回复此邮件或在 GitHub 上查看
https://github.com/mrdoob/three.js/issues/8110#issuecomment -183208337。

jonobr1 于 2016-02-12

流媒体视频本身不是问题。如果您在 js 中创建视频元素并使用 video.src 设置视频元素的来源，则视频流很好。使用 shaka 进行自适应流式传输是一个问题。我觉得问题出在 webkit 和 gecko 中的 CORS 实现上，因此是 Safari 中的 DOM Exception 18。下面的示例适用于所有浏览器上的相同域视频源。

            var video = document.createElement( 'video' );
            video.width = 640;
            video.height = 360;
            video.autoplay = true;
            video.loop = true;
            video.src = "<your mp4 source>";

           // adding the line below makes cross origin videos work, but just for chrome
           // video.crossOrigin = 'anonymous';

            var texture = new THREE.VideoTexture( video );
            texture.minFilter = THREE.LinearFilter;

            var material   = new THREE.MeshBasicMaterial( { map : texture } );

            mesh = new THREE.Mesh( geometry, material );

tahasabih 于 2016-02-12

只是为了澄清我不认为video.src = "<your mp4 source>";正在流式传输。我相信它是渐进式下载。但是，是的，我同意你的看法。

jonobr1 于 2016-02-12

伙计们仍然只是解决这个问题。现在人们正在尝试制作 VR 视频，情况只会变得更糟。

谢天谢地，有一张票打开，否则如果我试图传达这一点，我就会被关闭。

多年来，Safari 一直存在 CORS 问题。这是一个严重的缺陷，他们完全蔑视它。 2D 画布绘图也受到影响。

我直接与 Apple 创建了一张票，因为自 2014 年 7 月以来，webkit 的问题一直未分配。在那之前，WebGL 视频在 IOS 和 Safari 上基本没用。但是，Iphone 播放内联视频也是必需的。

我相信向 Apple 提交重复文件可能会帮助他们加快进度。

请看这些。我几乎已经完成了在 Android 上完全运行的视频纹理和 360 度视频，Chrome Dev 只修复了渲染问题，我不得不不知疲倦地使用铬来解决这个问题。 Chrome 现在存在视频播放性能问题。

我现在对 Safari 搞砸了！

这是实际苹果票的雷达，逐字逐句

https://openradar.appspot.com/24641824

https://forums.developer.apple.com/message/113161#113161

实际的 webkit 问题。他们是一件作品。

https://bugs.webkit.org/show_bug.cgi?id=135379

基本上这与three.js无关，但@mrdoob请保持开放，这很重要。

您需要执行永远不会像使用画布 2D 绘图绘制快照那样缩放的反向代理技巧。暂时记录在这里

https://flowplayer.electroteque.org/snapshot/fp6

location /video/ {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass //videos.electroteque.org/;
        proxy_redirect off;
    }

那将转发到cloudfront。它适用于任何视频，包括 HLS。

danrossi 于 2016-02-13

似乎这比在 IOS 上阻止它更有意的破坏。 IOS 上的 Firefox 也无缘无故地不支持 CORS。它显示了我的 CORS 代理黑客回退功能。我认为至少 Firefox 会功能齐全。

danrossi 于 2016-02-13

这仍然不能解释为什么 Firefox 桌面不会绘制图像。它发送原始标头，如果在没有 Shaka 的情况下使用它可以正常工作。只有当视频源被引用到一个 blob 时（如自适应流的情况），它才会无法绘制图像。它还没有报告令人沮丧的错误。

tahasabih 于 2016-02-13

Dash 适用于 Dash.js 和视频纹理。但是一旦我完成重构他们的更改，我将在 Windows/OSX 上进行确认。

danrossi 于 2016-02-13

Firefox OSX 和 Windows 功能齐全。使用 Dash 或普通的 html5 流媒体。

除了以下内容：

我得到这些日志出现在 OSX 和 Windows 上。

Error: WebGL: Disallowing antialiased backbuffers due to blacklisting.

我在 Vmware 的 Windows 10 上运行 Firefox。因此，我认为 Firefox 正在阻止 Webgl。它又回到了 CanvasRenderer。我必须使用此配置专门启用 webgl。

webgl.force-enabled=true

您需要检查 WebGL 支持并回退到 CanvasRenderer，但我认为这不是您的问题。

WebGL 和 Canvas 都需要 CORS 支持才能工作，因此排除了 Firefox。现在都是那些 webkit 笨蛋和苹果。

danrossi 于 2016-02-13

仅供参考，这就是我生成的视频标签的样子。

您需要跨域属性，这对 Safari 来说是大惊小怪的。谁说它在 Firefox 上不起作用是不正确的。

Safari 多年来一直未能实现它，这就是为什么 WebGL 不适用于需要反向代理黑客的跨域视频。

IE 对 CORS 的支持也很狡猾。 IE11 也未能实现它。 Edge 浏览器适用于 CORS 和 Webgl。

<video crossorigin="anonymous" x-webkit-airplay="allow" preload="auto" webkit-playsinline="true" src="blob:http%3A//localhost%3A8000/8a0dd373-8cb1-4a1d-9ad2-60d0b8f001bf" width="1024" height="512"></video>

danrossi 于 2016-02-13

嘿@danrossi ，喜欢这种热情！你有它在 dash.js 中工作的在线示例吗？

此外，我向 Safari 和 Firefox 提交了错误。您可以在此处查看两者的进度：

https://bugs.webkit.org/show_bug.cgi?id=154189

https://bugzilla.mozilla.org/show_bug.cgi?id=1248054

jonobr1 于 2016-02-13

尝试使用带有视频标签的 dash.js。如果 safari 与 dash 一起工作，我将与代理黑客确认。

我建议让 Apple 参与 CORS 问题，方法是像我一样向他们发出有关 CORS 问题的重复票证。我的意思是，自 2014 年 7 月以来，webkit 票证可能就在那里，但像这样严重的事情他们应该采取行动。

danrossi 于 2016-02-13

确认代理黑客在 Safari 上使用 MediaSource 时没有任何作用，它可以处理 mp4 文件。所以即使他们最终实施了 CORS，这仍然会被打破。

我在 webkit 问题中发表了评论，但考虑到自 2014 年以来主要的 CORS 票一直未分配，Safari 和 IOS 对 VR 来说已经死了。

Firefox 在 Windows 10 和 OSX 上对我来说非常好。 Firefox 在 IOS 上没有 CORS，所以在那里没用。我可能会为他们制作一张票，所以至少有一些东西在 IOS 上工作。

danrossi 于 2016-02-13

我在你的 webkit 票上留下了另一条评论。它们与主要的 CORS 问题有关，可能应该立即合并和处理。

真正让我发疯的是你的票被分配了，但实际 CORS 问题的票已经被搁置了 2 年，使得 Safari 上的 VR 毫无用处。

同样，这个与three.js无关，但应该为那些只意识到Safari和IOS被塞满的人打开。

danrossi 于 2016-02-14

好的，在对 Iphone 的内联视频黑客进行了一些研究之后，我已经将其添加到 Apple 票证中，它似乎在没有 CORS 的情况下绘制到 2D 画布上是可以的。它在尝试从中获取数据 uri 时出现问题，所以我的错误。因此，在使用 WebGL 时，这似乎也是一个问题，因为 Safari 缺乏 CORS 支持，而不得不求助于画布渲染器。

它不会或不会在 IOS 上表现良好，因为它会丢帧，我相信它需要运行一个音频标签来播放音频，这样就不能很好地用于 mpeg dash。

见http://stanko.github.io/html-canvas-video-player/

danrossi 于 2016-02-15

👍1

为了简单起见，我更新了这个原始的 webgl 示例，将 mp4 用于 safari。我还更新了那个 webkit 票证。这是因为缺乏 CORS 支持。

https://jsfiddle.net/7t77rz6L/11/

“SecurityError: DOM Exception 18: 试图突破用户代理的安全策略。”

danrossi 于 2016-02-15

感谢您关注报告问题。我也在three.js外面看到过这个，很烦人..！

gsabran 于 2016-02-15

苹果！如果可能的话，它需要大量的重复票。我的意思是，见鬼的 Youtube 确信自己有 WebGL 支持，但 Safari 将无法工作，也无法在他们当前的 360 播放器中工作，所以我不确定他们为什么不做任何事情。我也确认即使使用代理黑客 Iphone 也不会在线播放，因此 VR 和 VR 眼镜在 Iphone 上完全没用。它需要一个非常狡猾的技巧来单独播放音频并更新视频的时间以获得新的帧，因此实际上不播放视频。这不适用于破折号。

danrossi 于 2016-02-16

格式权利不是真正的非技术问题，这不是法律问题吗？所以你试过我假设的其他格式吗？ webm ogg 显然还有媒体源扩展 MSE 的想法，MP4 H.264 也有不同的高配置设置，不能在低端硬件上运行（问题）。
我记得视频格式兼容性的问题是非技术性的，更多的是许可和法律问题，或者只是控制狂问题。
无论如何如此令人震惊+1。我想我们可以一直抵制，最终没有人会使用不起作用的东西。由于许多其他原因，包括这个原因，我专门使用 Android 和 Chrome。

MasterJames 于 2016-02-16

这是一个缺乏 CORS 功能的 webkit 问题。多年来，他们一直认为自己可以侥幸逃脱。直到现在，尝试使用 Webgl 的人们遇到了问题并且才意识到。一场等待发生的意外。与强制 Iphone 不在线播放相同。同域视频不是现实世界的用法。

Android Chrome 有 webgl 问题也呈现到画布。我刚刚花了整整一个月的时间来处理这个问题，并最终在那张票中确认了最新的 Dev 现在又开始工作了。至少 Android 可以与 VR 眼镜和 WebVR 配合使用，而 Iphone 则不能。

我将再次尝试使用实际的本地加载的破折号文件，看看会发生什么。

danrossi 于 2016-02-16

webkit 票证上有状态更新。我相信他们必须修复其他东西才能处理该票，但仍然没有人分配到实际的 cors 错误票。绝对一切都在指望他们修复它，并希望在 IOS 和 safari 中发布。这对苹果来说应该是非常尴尬的。他们无缘无故地让这件事过去了很多年。

danrossi 于 2016-03-01

@danrossi感谢您让我们了解最新情况！ 😊

mrdoob 于 2016-03-01

@danrossi了不起的工作！感谢所有更新

terkelg 于 2016-03-11

？？？ Webkit 开发人员现在工作吗？

我还没有看到状态更新另有说明，但有提交的噪音。我会确认。

这是最后一次更新。谁知道这是否真的解决了缺少 CORS 支持的问题。

https://bugs.webkit.org/show_bug.cgi?id=125157#c29

谁知道它是否会进入IOS。 Iphone 内嵌视频播放问题也值得关注。我应该为此向 Apple 再开一张错误票吗？

哦，对不起，我以为你说它有效哈哈。看起来很接近。我有一张 Apple 的雷达票，但他们从未回应。如果他们要采取行动或注意 VR 在他们的平台上工作，则需要进行复制。

danrossi 于 2016-03-11

所以我相信苹果面临的压力越来越大。他们关闭了我的票，声称有一个您无法看到或评论的副本，而且它看起来像是一张很早的票。但这仍然不能解释用于 WebGL 的 Iphone 内联视频播放。他们需要大量抱怨才能提供可能需要数年时间。

我已经回去检查了 Chrome 的人，似乎 Chrome Dev Android 仍然无法渲染 WebGL。有一些标志可以打开以使其显示，但它会导致严重的丢帧。

原生 Android 浏览器有像 Safari 这样的 CORS 问题，所以没用。 Firefox IOS 也缺乏 CORS 支持，并且将添加一张票让他们实施它。这个 CORS 的东西使一切都瘫痪了，真是令人震惊。

因此，如果你们需要一个支持所有功能的移动支持向量。 Android Firefox 每晚都会在那里修复方向错误，仅此而已。很伤心。

danrossi 于 2016-03-13

👍1

如果感兴趣，我已经在这里正式打了票，所以至少 IOS 上的 Firefox 可能有 WebVR 工作，而忘记了 Safari。我还没有确认它是否可以在 Iphone 上播放内联视频。他们可能会更快地对 CORS 支持采取行动，但令人震惊的是，事实并非如此。

https://bugzilla.mozilla.org/show_bug.cgi?id=1256083

danrossi 于 2016-03-13

确认 Apple 的禁用机制也迫使视频进入 Firefox 的本机播放器。从外观上看是蓄意破坏。

danrossi 于 2016-03-13

这也不会在 mac 上的 Firefox 中的画布上显示任何内容（在 chrome 中有效），而不是 ios 问题。

makc 于 2016-03-13

哦，大约2:50后ff开始显示图片

makc 于 2016-03-13

不要误会这里。这是一个 CORS 问题，它与 IOS / Safari 有关。我对那个破折号示例一无所知，但我已经在 OSX 上的 Firefox 上使用视频纹理测试了破折号，并且很好。

danrossi 于 2016-03-13

使用 Firefox 上的 Dash，当您处理视频文件以使其与 dash 兼容时，您制作的片段似乎有问题。不分割文件似乎在 Firefox 上工作（也可以解释为什么分割视频的最后几秒钟播放）。

2016 年 3 月 13 日晚上 9:51，danrossi [email protected]写道：
不要误会这里。这是一个 CORS 问题，它与 IOS / Safari 有关。我对那个破折号示例一无所知，但我已经在 OSX 上的 Firefox 上使用视频纹理测试了破折号，并且很好。
—
直接回复此邮件或在 GitHub 上查看。

tahasabih 于 2016-03-13

这是我用three.js测试过的打包文件。我用过便当4。 h264 关键帧间隔仍然是 (2,3,4) * 帧速率，如 HLS。 WebGL 没有问题。 CORS 问题对于 IOS 上的 Webkit、Apple 和 Firefox 来说是一个很大的问题。您必须指定“crossorigin”属性。

https://videos.electroteque.org/dash/nodrm/bbb/bbb.mpd

danrossi 于 2016-03-14

很抱歉把这个带到这里，但人们需要知道。

嗨，伙计们，我刚刚解决了一些非常错误和倒退的问题，并且对于移动设备来说也是如此，这给我带来了痛苦的世界。

Samsung Gear 尝试在 S7 上使用浏览器启动它自己的应用程序。我让某人测试了 WebGL / WebVR，当戴上 Gear 眼镜时，它会启动自己的应用程序而不是 Chrome。 WebVR 的重点是在全屏进入眼镜时启动 WebGL 画布。

所以发生的事情是，他们愚蠢的应用程序似乎使用股票 Android 浏览器代码而不是 Chrome，因此不支持 WebGL 视频纹理和跨域视频，甚至 WebVR api。

应用程序太老了，期待下载完整的内容来播放它。渐进式下载 mp4 文件也是如此，现在都是分段流式传输，因此该模型已过时。

我刚刚发现生产版 Chrome 似乎可以在 S7 上渲染 WebGL 视频纹理，但我的 S3 完全坏了，几个月来一直试图与 chrome 开发人员一起解决这个问题。

不知道 IOS 到底发生了什么。 IOS现在对VR也完全没用。 Webkit 仍然充斥着跨域安全支持，他们多年来未能投入使用，导致 VR 毫无用处。因此，以上所有这些。

danrossi 于 2016-03-18

仅供参考：此提交https://github.com/mrdoob/three.js/commit/854ebf5bd6179a3046d4b901b12a9cbc99008c61修复了 Firefox 的问题👍

jonobr1 于 2016-05-17

🎉1

嗨，根据这个秘密，因为 Apple 忽略了我的错误票并关闭了它们，似乎 Apple 已经修复了它，但在 Safari 中分叉了代码，但在 macOS 中。甚至没人使用的操作系统和浏览器。

如果他们不将其合并回 webkit 并为当前浏览器提供补丁更新，那么人们将不得不等待但仍提供旧代理回退。

尽管代理黑客不起作用但会再次确认，但对于 Dash 来说，这仍然会被破坏。

https://twitter.com/zenoc/status/742770789880111104

danrossi 于 2016-06-15

嘿伙计们感谢所有的信息，

但实际上，如果有人可以详细解释如何实施此处列出的“反向代理黑客”：
https://github.com/mrdoob/three.js/issues/8110#issuecomment -183570240

那很好啊

谢谢
萨尔

saar62097 于 2016-07-04

对于阿帕奇

 ProxyPass /video/ //videos.electroteque.org/
    ProxyPassReverse /video/ //videos.electroteque.org/

对于 Nginx

location /video/ {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass //videos.electroteque.org/;
    proxy_redirect off;
    }

danrossi 于 2016-07-04

👍1

据我所知，当前的 webkit 浏览器永远不会看到变化。他们将为 Mac 和 IOS 操作系统做好准备，甚至没人拥有。由于“框架问题”阻碍了它，他们仍在为 IOS 使用 CORS。

如果 Stage3D 可以渲染硬件加速，则可能不得不求助于 Flash 解决方案，但它不喜欢它可以。它不断地绘制位图数据。

danrossi 于 2016-07-04

感谢您的快速回复

好的，所以对我来说还没有解决方法，直到 Apple 解决这个问题。

捕获“DOM Exception 18”作为后备选项怎么样？我怎样才能抓住它？

我试图把它放在一个 THREE.WebGLRenderer 对象的 render() 调用上，但它没有被抓住。

saar62097 于 2016-07-05

您对临时视频进行检测。 IE

testVideo.hasAttribute("crossOrigin")

您也可以只进行浏览器检测。它的 Safari 和 IE 11。

danrossi 于 2016-07-06

只是提一下这个疯狂的问题。除非我部署到 Ipad，否则我无法在 IOS 上测试 VR 模式。

Cordova 应用程序使用 WebView。它有内联播放选项，因此可以解决这个讨厌的问题。它围绕用户交互工作。这是其中最疯狂的一个，一直让我发疯。

WebView 似乎可以完全解决 CORS，即使它是在file://上运行的本地 html 文件

我无法检查伪 VR 方向控件，但触摸控件正在工作，旧的纸板立体效果也是如此。我将更新该 Webkit 票证。

在 Android 上进行测试是一个问题，因为我花了 3 个月的时间试图让 Chromium 人员修复并放弃了 Chrome 渲染错误。可悲的是，它完全是黑色的，希望不是没有显示错误的 CORS 问题。

danrossi 于 2016-07-06

所以我做对了吗？通过在服务器上实施代理黑客，它仍然是将 webgl 视频纹理与 webgl 一起使用的唯一方法吗？

florianmaxim 于 2016-08-23

Safari 是完全和彻底的 bolloxed，IOS 也是如此。如果您使用基于 Cordova WebView 的应用程序，您可以在线播放、自动播放并且不要问为什么，但 CORS 不是问题。那将适用于 IOS 上的 mp4/HLS。

但正如我所报告和发现的那样。他们限制旧设备并减慢它们的速度以迫使人们升级。 Ipad 3 对 WebGL 毫无用处，渲染速度为 5fps。它需要是较新的设备。

在 OSX 上的 Safari 中，mediasource 是完全和完全的 bolloxed。 CORS 代理在那里不起作用。它也需要是 mp4 文件或本机 HLS。使用本机 HLS，您可以提供 CORS 代理 url。

苹果公司的这些蠢货正计划在 macOS 中发布修复程序，因此在某些方面甚至还没有人发布。

他们正在尝试修复 IOS 中的底层框架问题。所以我怀疑 CORS 甚至会在下一个 IOS 版本中得到修复。

WebVR 也没有，两者都是一个笑话。他们将 WebVR 视为某种笑话，并且落后了很多年。

桌面上的 WebVR 需要 Windows SDK，所以无论如何 OSX 都不是一个选项，但至少 api 可以用于客户端测试？如果 Android 有一个默认的纸板显示器，不知道为什么 IOS 不能并且启用了 WebVR？

他们将这个 CORS 问题拖了多年，这就是结果。

danrossi 于 2016-08-23

这听起来真的很疯狂。
（抱歉，我不是全栈开发人员）
我只想确定：总而言之，如果我无法访问 webgl 上的服务器视频纹理，那么在 ios 上是不可能的？使用代理黑客，它可以在 ios 上运行，但不能在 osx 上运行吗？

florianmaxim 于 2016-08-23

你可以试试 iframe。我还没有尝试过。播放器必须与视频文件一起坐在云端。

但是对动态代码没有帮助。即一些伪链接。

视频链接是 //videos.electroteque.org/360/video.mp4

iframe 页面是 //videos.electroteque.org/360/player.html

我相信，苹果正在以标准引领潮流。您需要为播放器提供静态文件 iframe 页面的地方。

danrossi 于 2016-08-23

我看到 iOS 版 Chrome 将添加内联播放：
https://bugs.chromium.org/p/chromium/issues/detail?id=395206
2016 年 8 月 23 日，星期二，上午 5:18，danrossi [email protected]写道：

你可以试试 iframe。我还没有尝试过。玩家将不得不
与视频文件一起坐在云端。
但是对动态代码没有帮助。即一些伪链接。
视频链接是 //videos.electroteque.org/360/video.mp4
iframe 页面是 //videos.electroteque.org/360/player.html
我相信，苹果正在以标准引领潮流。你需要静态的地方
为您的播放器文件 iframe 页面。
—
你收到这个是因为你被提到了。
直接回复本邮件，在GitHub上查看
https://github.com/mrdoob/three.js/issues/8110#issuecomment -241712327，
或静音线程
https://github.com/notifications/unsubscribe-auth/AANbgfcQaLhx_UmJHEmViJ76_Hi4uikSks5qiuUKgaJpZM4HYtu3
.

jonobr1 于 2016-08-23

是的！ 🤘

mrdoob 于 2016-08-23

🎉1

我刚刚在 IOS 上测试了 Chrome。我不知道他们有一个。

看起来它也像Firefox一样使用Webkit。并遭受 CORS 问题。很难在 IOS 上远程调试 Chrome，因为明显的 Apple 硬限制，并且 weinre 不断崩溃。但是我在 url 周围更改了我的 CORS 工作，我得到了一个黑框。所以我知道 CORS 在 IOS 上的 Chrome、Firefox 和 Safari 上是残缺的。使用正确的 CORS 代理 url，它可以“工作”

内嵌播放只是问题的一部分，而且只是 Iphone 的问题。

danrossi 于 2016-08-23

iOS 10 即将推出内联播放。 iframe 解决方案适用于 CORS 问题，但您在子窗口中丢失了devicemotion和orientationchange事件

thiagopnts 于 2016-08-25

是的，仅获得内联播放只是问题的一半。 CORS 问题要重要得多，但它不会出现在 IOS 10 中。CORS 问题可能在 Safari 中完全修复，但在 macOS 中。

例如，Iframe 解决方案不需要与云存储位于同一域中。也许有某种 DNS hack 使它看起来像 cname sub.domain.com 是 domain.com 但不知道。

@thiagopnts那么，即使在全屏模式下，这些事件也会在 iframe 嵌入式播放器中被禁用吗？

danrossi 于 2016-08-25

@danrossi根据我们的测试，所有附加到window都不会在 iframe 中触发

thiagopnts 于 2016-08-25

不错的一个苹果！

danrossi 于 2016-08-25

@thiagopnts你能举一个解决 cors 问题的 iframe 示例吗？谢谢！！

florianmaxim 于 2016-08-27

@cheesyeyes在这里： http : //thiago.me/kaleidoscope/iframe.html
该页面在github页面下，然后从谷歌驱动器加载iframe和视频

thiagopnts 于 2016-08-27

是的，适用于 Safari 但不是很实用。 CDN 上每个视频的静态 html 文件？

danrossi 于 2016-08-28

各位大侠，这个问题要关闭吗？

mrdoob 于 2016-08-28

我想所以你无能为力。就像我们刚刚发现的 fps 问题一样，“旧的 Idevice 打算节流以使其过时”。

danrossi 于 2016-08-28

👍2

在优胜美地的 Safari 中发生了一些以前没有的真正奇怪的变化。在我做过的很多事情中，它都破坏了 CORS 的特征检测。

只是提醒人们工作它真的是多么破碎。

var testVideo = document.createElement("video");
 testVideo.crossOrigin = "anonymous";
console.log(testVideo.hasAttribute("crossOrigin"));

在 IE11 中，它按预期返回 false。在 Safari 中确实如此，但很明显 CORS 错误仍然存在。特征检测显然需要代理黑客。疯狂。

所以我不禁想到一些半生不熟的变化被推动了？

danrossi 于 2016-09-22

这个带有 crossOrigin 标志的奇怪变化出现在 Safari 10 中。所以一个半成品的实现。 Safari 9 没有。

我已经报告了一些 webkit 错误票证。

他们已经破坏了对 IOS 更新的 CORS 代理黑客攻击。据报道，macOS 也没有修复 Safari 中的 CORS 问题。

我现在必须弄清楚如何解决他们的破坏行为。

真是让我汗流浃背啊哈哈。

danrossi 于 2016-09-24

每个人，尽自己的一份力量，说服你认识的人停止使用 Apple 设备。让他们知道 Apple 是新的 IE5。

iambumblehead 于 2016-10-21

👍4

很遗憾地说 IOS 上的 CORS 是一个框架限制，我相信他们没有费心在 IOS 10 中修复。除此之外，使用 Webkit 的任何东西都是一个问题。

danrossi 于 2016-10-22

👍3

显然，CORS 问题已在 macOS 的 Safari 中修复，但最新更新。内嵌视频播放也适用于 IOS 10。

这是针对 mp4 流的两个测试，另一个针对 HLS。 HLS 需要额外的工作，因为 FlipY 的一个单独的错误仍然是 OSX Safari 上的一个问题。

IOS 10 上的 HLS 渲染正在显示，但存在颜色伪影问题。帧停止工作，但我认为这是模拟器和丢帧的问题。由于 Apple 端的过时和臃肿的编程，我现在没有可以更新到 IOS 10 的设备。 HLS 仍然在 IOS 9 上根本没有出现。两者都需要用于 mp4 和 HLS 的 CORS 代理。

http://dev.electroteque.org/webgl/threejscors.html
http://dev.electroteque.org/webgl/threejscors-hls.html

danrossi 于 2016-11-08

现在遇到了无法使用 crossOrigin 功能检测的情况，因为它报告了 OSX 10.11 中的支持，但没有这样的事情。还必须尝试检测使用了哪个 OSX Safari。很坏。

danrossi 于 2016-11-09

这有点荒谬，并且确实阻碍了 iOS 开发任何基于视频的真实 WebVR。我试图将跨域资源作为当前项目的一部分，这是现在唯一阻碍我的事情。适用于所有 android 和台式机/笔记本电脑，但当然它不适用于 iOS...

theDrGray 于 2016-11-15

@theDrGray您可以尝试 iframe hack，但是 iframes 阻止了方向 apis，我相信这需要另一个 hack 吗？我很快就会研究一个 iframe 演示。

这意味着在您的 CDN 上，您需要为每个视频设置静态视频播放器，这很糟糕。我可能会玩的是

filename.html 被解析并且加载的文件名是 filename.mp4 , filename.webm, filename,m3u8 filename.mpd 等。然后可以像 filename.html?t=token 这样加载私有令牌。

如果只有 Amazon Lamda 函数可以在与视频 cname 相同的域上工作，那么播放器可能是动态的？？

如果所有其他方法都失败了，您需要一个 CORS 代理，现在检测这是一个问题。他们在 Safari 10 中破坏了它。 Safari 10 报告支持“crossOrigin”，但在 IOS 10 和 Yosemite 中确实没有。你需要对OSX 10.12做二次检查哈哈

这是我的 ES6 播放器项目中 CORS 检测的样子

static supportsCORS() {
        let testVideo = document.createElement("video"),
            hasCORS = false;

        testVideo.crossOrigin = "anonymous";
        hasCORS = testVideo.hasAttribute("crossOrigin");
        testVideo = null;

        if (hasCORS) {

            if (WebVRUtils.isSafari) {

                if (WebVRUtils.isIpad) return false;
                return WebVRUtils.isNewSafari;
            }

            return true;
        }

        return false;

    }

    static get isSafari() {
        const userAgent = navigator.userAgent;
        return (/Safari/i).test(userAgent) && !(/Chrome/i).test(userAgent);
    }

    static get isIpad() {
        const userAgent = navigator.userAgent;
        return (/iP(hone|od|ad)/i).test(userAgent);
    }

    static get isNewSafari() {
        const version = /Mac OS X (10[\.\_\d]+)/.exec(navigator.userAgent)[1].split("_")[1];
        return +version >= 12;
    }

danrossi 于 2016-11-16

同样的问题在这里......除iOS之外的任何地方都可以使用。太让人心烦了。我的可交付成果有多大漏洞。它仅在源路径是相对的时才有效（我可以添加可怕的帧速率）......对于缩放系统来说并不理想。呃......嗯......至少我可以停止敲我的头......这是不可能的......现在......现在围绕它构建......以及用户体验后备和消息传递。

bonomite 于 2016-11-19

😕1

@danrossi感谢您的评论“显然 CORS 问题已在 macOS 的 Safari 中修复，但最新更新”，但是除了您的评论之外，我无法在其他任何地方找到其他详细信息。你知道这适用于什么版本的 macOS 和 Safari 吗？这是否是 Apple 将该修复程序传播到 iOS 的“标志”？

kfarr 于 2016-12-01

一个人可以希望...

2016 年 12 月 1 日下午 3:50，“Kieran Farr”通知@ github.com 写道：

@danrossi https://github.com/danrossi感谢您的评论
“显然，macOS 的 Safari 中已修复 CORS 问题，但最新的
更新”，但是我无法在其他任何地方找到其他详细信息
除了你的评论。你知道这是什么版本的 macOS 和 Safari
与？这会是一个“标志”，表明 Apple 会将该修复程序传播到
IOS？
—
您收到此消息是因为您发表了评论。
直接回复本邮件，在GitHub上查看
https://github.com/mrdoob/three.js/issues/8110#issuecomment-264290616 ，
或静音线程
https://github.com/notifications/unsubscribe-auth/ANKfT8A140W4hW0YMqq3L6AP_gljY4WUks5rDzMGgaJpZM4HYtu3
.

bonomite 于 2016-12-01

@kfarr无论 macOS 的最新更新是什么。以前版本的 OSX 和 Safari 仍然存在这个问题。苹果就是这样滚动的。他们强迫用户更新以获得修复。

danrossi 于 2016-12-01

使用最新的 macOS Sierra 10.12.1 (16B2659) Safari 版本 10.0.1 (12602.2.14.0.7)对此测试 URL进行

在 iOS 10.2 Public Beta 3 (14C5077b) 上的 Mobile Safari 中仍未修复错误。有更新的 Beta 4 可用，但我尚未安装或测试。

kfarr 于 2016-12-02

是的，它仍然是 IOS 的问题。如果您使用基于 WebView Cordova 的应用程序。根本没有 CORS 问题，这是最奇怪的部分。

danrossi 于 2016-12-02

Hhmmmmmm ...... Cordova 包装修复了它！？！奇怪的...

2016 年 12 月 1 日下午 6:59，“danrossi”通知@github.com 写道：

是的，它仍然是 IOS 的问题。如果您使用基于 WebView Cordova 的应用程序。
根本没有 CORS 问题，这是最奇怪的部分。
—
您收到此消息是因为您发表了评论。
直接回复本邮件，在GitHub上查看
https://github.com/mrdoob/three.js/issues/8110#issuecomment-264333449 ，
或静音线程
https://github.com/notifications/unsubscribe-auth/ANKfT40CQRZqWYEJWmojo_Omvl38WeUlks5rD19GgaJpZM4HYtu3
.

bonomite 于 2016-12-02

Yes 可以解决任何 CORS 限制，甚至不需要 crossOrigin 属性。希望他们不会破坏它，因为这是一种选择。

danrossi 于 2016-12-02

知道是什么导致 Cordova WebView 出现这种行为吗？我试着通读这个源https://github.com/apache/cordova-ios/blob/master/CordovaLib/Classes/Private/Plugins/CDVUIWebViewEngine/CDVUIWebViewEngine.m并找不到任何相关的东西。

matti777 于 2016-12-27

@matti777就我而言，只要它有效，希望他们不会发现并故意破坏它，就这样吧哈哈。

尽管抱歉，我需要确认在 IOS10 上仍然是这种情况。现在我检测 Cordova 并且不尝试使用 CORS 代理源。我的功能在需要时切换到 CORS 代理源。

danrossi 于 2016-12-28

好吧，我的意思是，如果我知道 Cordova 用它的 UIWebView 做了什么不同的事情，我会在我自己的本机应用程序中复制该代码，以便为我的 html5 视频提供 CORS 支持，我也将其用作 THREE.js 纹理。

我们使用 Vimeo 托管的视频，而表单的公共 URL：

https://player.vimeo.com/external/...

..不工作，视频确实可以使用这些重定向到的 URL：

https://fpdl.vimeocdn.com/..

也许他们的 vimeocdn.com 安装了反向代理功能？我想我应该问 Vimeo。

我必须说我对此非常恼火。谢谢史蒂夫。

米

matti777 于 2016-12-28

我将尝试 IFRAME 解决方案。虽然不太确定该怎么做。我正在从代码创建视频元素/画布（当然，从不将它们添加到 DOM 中）所以我想知道是否有类似的东西：

self.iframe = document.createElement("IFRAME");
self.iframe.setAttribute("src", 'https://player.vimeo.com/');
self.iframe.appendChild(self.video);

.. 足够。

matti777 于 2016-12-28

所以，呃，在放弃 iOS 视频纹理之后，我转向 Android，只是为了通过 THREE.js 注意到类似的行为；我的 CORS 视频播放（我听到音频）但视频没有呈现——我得到的只是黑屏。我刚刚用 THREE.js r79 和 r84 尝试了这个。这里奇怪的是http://krpano.com/ios/bugs/ios8-webgl-video-cors/在 Android 上运行得很好？

这是我在 Android 上使用的代码 - 以及所有平台，就此而言 - （在 webview 中的本机应用程序中运行，硬件加速打开并安装 WebChromeClient）：

http://pastebin.com/Y1D3beti

与工作 krpano.com 原始 WebGL 的唯一区别是他们直接从视频元素而不是通过画布上传纹理 - 这是我的问题吗？我真的需要通过画布渲染以在视频图像上和周围添加东西。

马蒂

matti777 于 2017-01-25

与工作 krpano.com 原始 WebGL 的唯一区别是他们直接从视频元素而不是通过画布上传纹理 - 这是我的问题吗？

也许？您是否尝试过直接传递视频？

mrdoob 于 2017-01-26

此票证与 Safari 的 CORS 问题有关。即使对于 Dash，macOS 中的 Safari 10 也已完全修复。

IOS 10 仍然是 COR 的问题，需要 CORS 代理。或者使用完全不使用 CORS 限制的 Cordova Webview 应用程序。

Android 股票浏览器不支持 CORS，甚至 CORS 代理也不起作用。

Chrome 和 Firefox 仅适用于 Android。

恐怕这个特定问题与three.js 无关。我什至不会使用会丢失太多帧的画布绘图。

danrossi 于 2017-01-26

@danrossi我们能看看你在建造什么吗？听起来相当令人印象深刻！

2017 年 1 月 26 日星期四上午 8 点 41 分，danrossi [email protected]写道：

此票证与 Safari 的 CORS 问题有关。 macOS 中的 Safari 10 是
即使对于 Dash 也完全修复。
IOS 10 仍然是 COR 的问题，需要 CORS 代理。
Android 股票浏览器不支持 CORS，甚至 CORS 代理也支持
不行。
Chrome 和 Firefox 仅适用于 Android。
恐怕这个特定问题与three.js 无关。一世
甚至不会使用会丢失太多帧的画布绘图。
—
你收到这个是因为你被提到了。
直接回复本邮件，在GitHub上查看
https://github.com/mrdoob/three.js/issues/8110#issuecomment-275438671 ，
或静音线程
https://github.com/notifications/unsubscribe-auth/AANbgazonmTe-yGDfgToCRVhTy_qyp_Eks5rWMy1gaJpZM4HYtu3
.
>

http://jonobr1.com/

jonobr1 于 2017-01-26

@danrossi Safari 完全适合您？您是否正在使用代理黑客来让 Safari 正常运行？我仍然在https://krpano.com/ios/bugs/ios8-webgl-video-cors/上使用 El Capitan 上的 Safari 10.0.3 获得SecurityError (DOM Exception 18): The operation is insecure. 。

timothyallan 于 2017-03-06

@timothyallan在开发许多不同的视频播放器功能时，我有太多其他项目需要专注。据我所知，他们已经在 macOS Safari 中修复了它，就他们而言，其他 Safari 都是蒸汽软件。我没有看到旧操作系统的更新，甚至安全更新。

IOS 10 是这里的交易破坏者，但问题仍然存在。我不得不一直向人们解释为什么它不起作用以及如何避免它。

苹果希望人们更新到新的操作系统，我相信这是最终的。

Safari 中 Dash 的 webgl 问题我在该票证上看到了点点滴滴的状态更新，但在我的测试中，我认为这也适用于 macOS。

danrossi 于 2017-03-06

😕2

这里只是更新。尽管仍然非常安静，但这些游走球提供了一些煽动性。

cors 修复程序在 IOS11 测试版中。 IOS10不会得到它。

https://bugs.webkit.org/show_bug.cgi?id=135379#c92

danrossi 于 2017-07-26

新的更新。据报告已修复 CORS 的设备上的 IOS 11 测试版。现在需要一个支持 IOS 11 的全新设备。

甚至不要理会它坏了并且没有 CORS 修复的模拟器。

https://bugs.webkit.org/show_bug.cgi?id=135379#c108

danrossi 于 2017-08-11

👍2

好极了！！

2017 年 8 月 11 日凌晨 2:53，“danrossi”通知@github.com 写道：

新的更新。据报告已修复 CORS 的设备上的 IOS 11 测试版。现在
需要支持 IOS 11 的全新设备。
https://bugs.webkit.org/show_bug.cgi?id=135379#c108
—
您收到此消息是因为您发表了评论。
直接回复本邮件，在GitHub上查看
https://github.com/mrdoob/three.js/issues/8110#issuecomment-321742658 ，
或静音线程
https://github.com/notifications/unsubscribe-auth/ANKfT5TG41uHQV8U_FrF8LaJ0EMKKIy_ks5sW_pjgaJpZM4HYtu3
.

bonomite 于 2017-08-11

确认 CORS 在 IOS 11.1 中已修复。我终于获得了购买硬件设备进行测试的预算。花了这么长时间。

11.1 不需要 CORS 代理。我不认为可以使用 Safari 正确测试 CORS 属性支持。必须进行客户端版本检查。

不过，现在需要解决主要的 HLS/webgl 回归问题。

danrossi 于 2017-11-05

👍1

伟大的。谢谢！

2017 年 11 月 5 日凌晨 1:36，“danrossi”通知@github.com 写道：

确认 CORS 在 IOS 11.1 中已修复。我终于有了预算
用于测试的硬件设备。花了这么长时间。
11.1 不需要 CORS 代理。我不认为 CORS 属性
可以使用 Safari 正确测试支持。必须做客户端版本
检查。
不过，现在需要解决主要的 HLS/webgl 回归问题。
—
您收到此消息是因为您发表了评论。
直接回复本邮件，在GitHub上查看
https://github.com/mrdoob/three.js/issues/8110#issuecomment-341952485 ，
或静音线程
https://github.com/notifications/unsubscribe-auth/ANKfT52MncuxghqJmPes4iFoO1a_K_Gfks5szVd1gaJpZM4HYtu3
.

bonomite 于 2017-11-11

Three.js: 用于流式处理视频纹理的 Safari/Firefox DOM 异常 18

最有用的评论

所有95条评论

>

相关问题