如何在手机和桌面上播放html5视频播放m3U8？

Question

我有HLS m3u8在IOS和Android上使用html5播放效果很好 <video>

但不能在桌面PC或桌面MAC(Chrome,Firefox)上播放

如何在台式机上玩m3u8？

是否存在可在桌面和移动设备上播放的视频流格式？

Answer 1

看一下https://github.com/video-dev/hls.js/上的hls.js项目, 它解决了这个问题.

这里有一个关于如何使用它的小样本.

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    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();
  });
 }
</script>

解析清单后,您可以使用原始html5视频元素的所有常规事件,属性和方法.

你可以在这里找到他们的演示:https://video-dev.github.io/hls.js/demo/

Answer 2

HLS仅适用于Mac OS Safari 6+中的桌面.看看这里参考.

对于桌面上的HTML5视频,您可以考虑使用MPEG DASH.它有一个JS lib,可以使用以下浏览器实时和按需工作:

截至2013年8月30日,桌面版Chrome,桌面版Internet Explorer 11和Android版移动版Chrome测试版是唯一支持的浏览器.

如果您希望使用自适应流媒体技术扩展浏览器/设备,则需要考虑使用支持RTMP和HDS的Flash或使用Smooth Streaming的Silverlight(我应该说Flash具有更好的覆盖范围).

今天大多数媒体公司使用混合方法Flash(HDS/RTMP - 桌面)/ HTML5(HLS - 移动)预先在设备上检查可以读取的内容,并提供适当的播放器/流媒体协议.

仅供参考,您可以在Windows桌面上使用VLC等软件播放HLS流.