在iOS / Safari上的Hls视频流 [英] Hls video streaming on iOS/Safari

问题描述

我正在尝试使用Aframe的Safari浏览器iOS上的hls流，该Aframe内置了three.js。但是视频显示黑屏，只播放音频。视频src是.m3u8类型的。我尝试阅读了许多相关文章，但似乎都没有合适的解决方案。获取HLS& amp;是一种如意算盘的想法吗？要在iOS上播放的WebGL？如果没有，请有人帮我解决。

I am trying to stream hls on safari iOS with Aframe that has three.js under the hood. But the video shows a black screen with just the audio playing. The video src is of type .m3u8. I tried to read through a lot of related posts but none seem to have a proper solution. Is it some kind of a wishful thinking getting HLS & WebGL to play on iOS? If not, can some one please help me with a solution.

关于github上可用问题的一些讨论：

A couple of discussions on the issues that are available on github:

HLS m3u8视频流

Safari上的HLS

推荐答案

对您的问题：

这是否是一厢情愿的想法获得HLS&要在iOS上播放WebGL吗？

Is it some kind of a wishful thinking getting HLS & WebGL to play on iOS?

是的，一厢情愿的想法:-)问题/问题/错误出在苹果公司，而不是任何图书馆。无论使用什么JS库， A框架，三个等，这在任何浏览器上都始终是一个问题。在iOS中（iOS上的所有浏览器基本上都是Safari的包装器）和OSX Safari。

Yes, wishful thinking :-) The problem/issue/bug is with Apple, not any library. No matter what the JS library, A-Frame, Three, etc, this will always be an issue on any browser in iOS (all browsers on iOS are basically wrappers for Safari), and OSX Safari.

问题是这样的（根据我的理解）：

The issue is this (from my understanding):

1. 在WebGL历史上的某个时候，跨域内容（视频，图像等）受到限制。我找不到它的来源，但我记得在某处阅读过，所以可能不是100％准确。


2. 最近（几年前？2015年）所有主流浏览器得出的结论是，用于WebGL的跨域媒体是安全的。除了Apple / Safari之外。


3. 对于大多数浏览器，< video> 上的 crossorigin 属性 code>元素可能表示此内容来自另一个来源。在Safari中，无论出于何种原因，此属性都会被忽略或未实现。实际上，它看起来像Safari所基于的WebKit，对此进行了修复早在2015年，但Apple仍未实施。甚至苹果也拒绝评论任何进展。



1. At some point in the history of WebGL, there were restrictions on cross-origin content (videos, images, etc). I can't find a source for this, but I remember reading it somewhere, so this might not be 100% accurate.
2. Recently (a couple years ago? 2015?) all major browsers came to the conclusion that cross-origin media for use in WebGL was safe. Except Apple/Safari.
3. For most browsers, the crossorigin attribute on a <video> element could signal that this content came from another source. In Safari, for whatever reason, this attribute is ignored or not implemented. In fact, it looks like WebKit, which Safari is based on, fixed this as far back as 2015, but Apple still does not implement it. Even Apple refuses to comment on any progress.

可能的解决方法：

1. Safari上的WebGL与渐进式（而不是像HLS / Dash这样的视频流） .mp4 视频。在iOS / Safari中查看Facebook上的任何360视频（网站，而非应用程序），您会注意到来源是 .mp4 。


2. 使用HLS（或Dash），但在没有WebGL的情况下平放视频。在YouTube（网站，不是应用程序）上查看任何360视频，我认为它们使用的是HLS或Dash，但要点是它们流视频，而Facebook没有。

1. WebGL on Safari works with progressive (not a stream like HLS/Dash) .mp4 videos. Check out any 360 video on Facebook (website, not app) in iOS/Safari, and you'll note the source is an .mp4.
2. Use HLS (or Dash), but play the video flat, without WebGL. Check out any 360 video on YouTube (website, not app), and I think they are using HLS or Dash, but the point is they stream the video, whereas Facebook doesn't.

这是真正问题的一个很好的起点：链接。

Here's a good starting point to the real issue: link.

这是另一个详细的线程：链接。

Here's another detailed thread: link.

这篇关于在iOS / Safari上的Hls视频流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！