iOS/Safari 上的 HLS 视频流

Question

我正在尝试在 safari iOS 上使用 Aframe 流式传输 hls，其中 Aframe 在后台具有三个.js。但视频显示黑屏，仅播放音频。视频 src 的类型为 .m3u8。我试图通读很多相关的帖子，但似乎没有一个合适的解决方案。让 HLS 和 WebGL 在 iOS 上运行是一种一厢情愿的想法吗？如果没有，请有人帮我解决一个问题。

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

• HLS m3u8 视频流

• Safari 上的 HLS

Answer 1

https://github.com/video-dev/hls.js#compatibility

请注意：iOS Safari“移动版”不支持 MediaSource API。然而，Safari 浏览器通过纯视频“标签”源 URL 提供内置 HLS 支持。请参阅上面的示例（入门）以运行适当的功能检测，并选择使用 Hls.js 或本机内置的 HLS 支持。

当平台既没有 MediaSource 也没有原生 HLS 支持时，您将无法播放 HLS。

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- Or if you want a more recent canary version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
<video id="video"></video>
<script>
  var video = document.getElementById('video');
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function() {
      video.play();
    });
  }
  // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
  // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
  // This is using the built-in support of the plain video element, without using hls.js.
  // Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
  // white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
    video.addEventListener('loadedmetadata', function() {
      video.play();
    });
  }
</script>

Answer 2

对于你的问题：

让 HLS 和 WebGL 在 iOS 上运行是一种一厢情愿的想法吗？

是的，一厢情愿:-) 问题/问题/错误出在 Apple，而不是任何图书馆。无论 JS 库、A-Frame、Three等是什么，这在 iOS 中的任何浏览器（iOS 上的所有浏览器基本上都是 Safari 的包装器）和 OSX Safari 上始终是一个问题。

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

1. 在 WebGL 历史上的某个时刻，对跨域内容（视频、图像等）存在限制。我找不到这个来源，但我记得在某处读过它，所以这可能不是 100% 准确。
2. 最近（几年前？2015 年？）所有主要浏览器都得出结论，在 WebGL 中使用的跨源媒体是安全的。除了苹果/Safari。
3. 对于大多数浏览器，元素crossorigin上的属性<video>可能表示该内容来自另一个来源。在 Safari 中，无论出于何种原因，此属性都会被忽略或未实现。事实上，Safari 所基于的 WebKit 看起来早在 2015 年就修复了这个问题，但 Apple 仍然没有实现它。甚至苹果公司也拒绝对任何进展发表评论。

可能的解决方法：

1. Safari 上的 WebGL 适用于渐进式（不是像 HLS/Dash 这样的流）.mp4视频。在 iOS/Safari 中查看 Facebook（网站，而不是应用程序）上的任何 360 度视频，您会注意到来源是.mp4.
2. 使用 HLS（或 Dash），但不使用 WebGL 播放平面视频。在 YouTube（网站，而不是应用程序）上查看任何 360 度视频，我认为他们正在使用 HLS 或 Dash，但关键是他们流式传输视频，而 Facebook 没有。

这是解决实际问题的一个很好的起点：link。

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