logo标签列表

如何在移动设备和桌面上播放HTML5视频播放M3U8？

video-streaminghtml5-videom3u8
19

我有一份适用于IOS和Android的HLS M3U8播放列表，可以在HTML5 <video> 中正常播放。

但是，在桌面电脑或桌面MAC（Chrome、Firefox）上无法播放。

如何在桌面电脑上播放M3U8？

是否有一种视频流格式，既可以在桌面电脑上播放，又可以在移动设备上播放？

这个回答解决了你的问题吗？在iOS/Safari上进行HLS视频流传输 - Amo Wu
5个回答
29

请查看 hls.js 项目，网址为 https://github.com/video-dev/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/

loadSource() 函数返回了 null 值。 - musmans
15
只能在Mac OS Safari 6+的桌面端使用。请参考此处。

对于桌面HTML5视频，您可以考虑使用MPEG DASH。 它有一个JS库，可以通过以下浏览器实现直播和点播：

截至2013年8月30日，仅支持桌面Chrome、桌面Internet Explorer 11和Mobile Chrome Beta for Android。

如果您希望使用自适应流媒体技术获得更广泛的浏览器/设备覆盖范围，则需要考虑使用支持RTMP和HDS的Flash或支持Smooth Streaming的Silverlight（我应该说Flash覆盖范围更广）。

今天大多数媒体公司使用混合方法Flash（HDS/RTMP-桌面）/ HTML5 （HLS-移动设备），JavaScript先检查设备可以读取什么，然后提供适当的播放器/流媒体协议。

另外，您可以使用像VLC这样的软件在Windows桌面上播放HLS流。

4

我知道现在回答可能有点晚了，但我一直在寻找这方面的信息，但在stackoverflow上没有找到好的答案......

据我所知，没有一个通用格式适用于移动和桌面设备。如果您想节省转码功率并只使用一个格式，我建议使用HLS，因为它在移动设备上运作良好，您可以使用免费库在浏览器中显示视频。

https://github.com/videojs/videojs-contrib-hls具有与videojs一起使用的工作示例。 它在Safari中使用HTML5，并在其他浏览器上退回到flash。 如果您有其他播放器，请查看https://github.com/mangui/flashls以获取更多示例。

3
<html>
<body>
    <video width="600" height="400" controls>
        <source src="index.m3u8" type="application/x-mpegURL">
    </video>
</body> 
</html>

使用上述代码可以流式传输HLS或m3u8文件。 它适用于Edge浏览器、Chrome和Opera Mini（移动浏览器）（在PC Chrome上不起作用）。
要在所有浏览器上播放，请使用基于Flash的媒体播放器。 媒体播放器以支持所有浏览器。
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接