Question

我正在尝试使用带有three.js的Aframe在safari iOS上传输hls。但视频显示的是黑屏，只播放音频。视频src的类型为.m3u8。我试图阅读很多相关的帖子，但似乎没有一个适当的解决方案。 HLS＆amp; amp;是否是一种一厢情愿的想法？ WebGL在iOS上播放？如果没有，有人可以帮我解决一下。

关于github上可用问题的几个讨论：

HLS m3u8 video streaming

HLS on Safari

Answer 1

问题：

获得HLS＆amp; amp;是一种一厢情愿的想法WebGL在iOS上播放？

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

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

在WebGL历史的某个时刻，对来源内容（视频，图像等）进行了限制。我找不到这方面的来源，但我记得在某个地方读过它，所以这可能不是100％准确。
最近（几年前？2015年？）所有主流浏览器都得出结论，在WebGL中使用的跨源媒体是安全的。 Apple / Safari除外。
对于大多数浏览器，crossorigin元素上的<video>属性可能表示此内容来自其他来源。在Safari中，无论出于何种原因，都会忽略或不实现此属性。事实上，它看起来像Safari所基于的WebKit fixed this as far back as 2015，但Apple仍然没有实现它。甚至是Apple refuses to comment on any progress。

可能的解决方法：

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

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

这是另一个详细的帖子：link。

Answer 2

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

请注意：iOS Safari“移动”不支持MediaSource API。 Safari浏览器通过简单的内置HLS支持视频“标签”源URL。请参见上面的示例（入门）运行适当的功能检测，并在使用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>

iOS / Safari上的Hls视频流

2 个答案: