iOS/Safari上的HLS视频流

Question

iOS/Safari上的HLS视频流

9

我正在尝试在具有three.js支持的Aframe上使用Safari iOS流式传输hls。但是视频只显示黑屏，只播放音频。视频源是.m3u8类型。我尝试阅读了许多相关帖子，但似乎没有一个正确的解决方案。是否希望在iOS上播放HLS和WebGL？如果不是，可以有人帮我找到解决方案吗？

关于该问题的一些讨论可在github上获得：

- HLS m3u8视频流 - Safari上的HLS

- Mustang

Web服务器使用哪些MIME类型，视频片段使用哪些编解码器？苹果不支持他们自己开发的系统，这很奇怪。 - Cambesa

2个回答

10

对于你的问题：

“在iOS上让HLS和WebGL播放是一种愿望吗？”

是的，这是一种愿望 :-) 问题/问题/错误出现在苹果公司，而不是任何库。无论使用什么JS库，如A-Frame、Three等，在iOS上的任何浏览器（iOS上的所有浏览器基本上都是Safari的包装器）和OSX Safari中，这将始终是一个问题。

问题在于（据我所知）：

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

可能的解决方法：

在Safari中使用WebGL播放器可以播放渐进式（不是像HLS/Dash那样的流）.mp4视频。在iOS/Safari上查看Facebook上的任何360度视频（网站，而不是应用程序），您会注意到源是一个.mp4。
使用HLS（或Dash），但是不要使用WebGL播放视频。在YouTube上观看任何360度视频（网站，而不是应用程序），我认为他们正在使用HLS或Dash，但重点是他们流式传输视频，而Facebook则没有。

这里有一个关于真正问题的好起点：link。

这里还有一个详细的线程：link。

- User 1058612

提供的链接谈论了CORS是问题，如果您从托管hls播放器的同一Web服务器流式传输视频，它仍然会是问题吗？ - Cambesa

那可能有效。我有一段时间没有使用这种技术了，但我们的视频很大，并且在CDN后面进行托管，因此即使代理流也会导致问题。不过，在本地可能会起作用。 - User 1058612

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amo Wu · Accepted Answer

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>