如何在所有 PC 浏览器中播放 m3u8 播放列表？

Posted 2023-02-24

技术标签:

【中文标题】如何在所有 PC 浏览器中播放 m3u8 播放列表？【英文标题】：How to play m3u8 playlist in all PC browsers? 【发布时间】：2011-07-27 20:07:48 【问题描述】：

默认情况下，m3u8 文件可以在 Mac Safari 浏览器中播放，但不能在任何其他桌面浏览器中播放。在支持 html5 和非 HTML5 的所有浏览器中播放它们需要做什么？

【问题讨论】：

m3u8 播放列表文件是由 Nullsoft 团队为 Winamp 音乐播放器创建的播放列表文件。有两个挑战：1) 文件路径可以是位于客户端计算机本地的绝对文件，以及 2) 指向远程文件的绝对 URL 链接。您如何知道播放列表中包含的文件是否来自本地文件？我使用了 flowplayer。它是免费和开源的，非常易于使用。我在 Windows 10 上使用 Microsoft Edge 流式传输 m3u8 文件。 【参考方案1】：

不幸的是，HTML5 对视频的支持如此分散，以至于无论出于何种意图和目的，它在此时都毫无用处（至少作为主要焦点）。 M3U8 播放列表是 Apple HTTP Live Streaming，从名称可以看出，它们是（或至少开始是）Apple 标准，没有其他浏览器使用它们或 HTTP Live Streaming。

您可以安装一些程序来添加对 HLS 的支持。例如，一些公司生产了用 Flash 或 Silverlight 编写的 HLS 播放器。 Yospace 制作了一个用于 HLS 播放的 Flash SDK，其中包括一个 JWPlayer 媒体提供程序，它允许您在非 Flash 设备（阅读：iPhone/iPad）上使用 JW 的自动 HTML5 回退，而所有其他设备都可以获得 JWPlayer 体验。

许多公司都承诺“标准化浏览器视频支持”，但它们（到目前为止）都落空了，所以无论你选择什么选项，都将是某种妥协。

【讨论】：

m3u8 不是（也不是作为）Apple 标准。 m3u 文件格式早在 90 年代后期就开始作为 Winamp 播放列表文件，并在启用在线流支持时扩展为包含更长的文件名和 HTTP 文件。我应该知道这一点，因为我从一个非常早期的 Winamp 版本开始（可能是因为它是在线开始的）并且至今仍在使用它。虽然 .m3u 文件确实如此，但 .m3u8 文件是 Apple 对该标准的专有扩展，由其 HLS 协议专门使用并在datatracker.ietf.org/doc/draft-pantos-http-live-streaming中定义只有扩展来自 Apple，但 m3u8 最初是为了允许更长的文件名而创建的。在早期版本的操作系统中，文件名长度为 8 个字符。较长的文件名不受欢迎或存在缺陷，尤其是在 Windows 95 和 98 年代初期。扩展是苹果后来引入的，我同意你的观点。是否可以让 HLS 格式的视频在浏览器上供用户离线使用？是否可以将 HLS 视频存储在用户浏览器中（在索引数据库等中），然后直接从那里播放（至少在短期内）？理论上这是可能的，但实际上没有浏览器可以做到这一点。【参考方案2】：

Microsoft Edge 播放 m3u8 文件，但您必须有 Windows 8 或 10... 只需打开 Microsoft Edge 并写入 m3u8 文件的 url 即可开始播放。

【讨论】：

您能否提供更多信息？ ***.com/help/how-to-answer 支持原生 HLS 的浏览器列表见en.wikipedia.org/wiki/…【参考方案3】：

我使用了flowplayer。它非常容易设置和使用，它适用于所有浏览器并且是免费的，除非您想要自己的品牌......（与 JW 播放器不同）。

在此处获取流播放器Flow Player download

按照这个演示，我成功地设置了 HLS 播放。

HLS Demo

有一点需要注意，演示中没有提到。

您将需要 jquery > 1.7 您将在 HTML 中包含播放器的皮肤 CSS

这是我运行 HLS 的工作页面，例如：

<!DOCTYPE html>
<html>
   <head>
      <title>Player</title>
      <link rel="stylesheet" href="/client/static/flowplayer-6.0.5/skin/functional.css">
      <script src="/client/static/flowplayer-6.0.5/jquery-1.12.4.min.js"></script>
      <script src="/client/static/flowplayer-6.0.5/flowplayer.min.js"></script>
      <script src="/client/static/flowplayer-6.0.5/flowplayer.hlsjs.min.js"></script>
   </head>
   <body>
      <div>
         <h3>Sample Video</h3>
      </div>
      <div id="player">
        <div data-live="false" data-ratio="0.5625" class="flowplayer fixed-controls" data-volume="0" style="max-width: 800px; max-height: 450px;">
            <video data-title="Sample Video">
            <source type="application/x-mpegurl" src="http://:8000/video_cache/d_stream_f7ccc24921ca6123d80d7d1a1a4bfaa1/stream_f7ccc24921ca6123d80d7d1a1a4bfaa1.m3u8">
            </video>
        </div>
         <p hidden id="vid">f7ccc24921ca6123d80d7d1a1a4bfaa1</p>
      </div>
   </body>
</html>

【讨论】：

是否可以让 HLS 格式的视频在浏览器上供用户离线使用？是否可以将 HLS 视频存储在用户浏览器中（在索引数据库等中），然后直接从那里播放（至少在短期内）？ @VikasBansal 你的意思是把浏览器设置为离线模式吗？实际上，我有需要构建一个功能以使视频离线可用的情况。类似于 youtube 离线视频但在浏览器上的功能。这是我的实际问题：***.com/questions/45252054/… @VikasBansal 最简单和最好的解决方案是公开可正常下载的文件的标准 mp4 版本，并使用 m3u8 进行流式传输【参考方案4】：

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title>Your title</title>


    <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js/dist/video.js"></script>
    <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>

</head>

<body>
    <video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto" data-setup=''>
    <source src="https://aznbkcstreamer-ukso1.streaming.media.azure.net/c1b3bdd8-2486-4300-89f3-3e4e9eacb57d/GWMAWARDS.ism/manifest(format=m3u8-aapl)" type="application/x-mpegURL">
  </video>

    <script>
        var player = videojs('my_video_1');
        player.play();
    </script>

</body>

</html

使用您的播放列表/视频链接试试这个。只需更改 src 链接即可。

【讨论】：

【参考方案5】：

我不完全了解 .m3u8 播放列表的交易...但我不是特别喜欢它们.. 也就是说，this似乎认为它可以满足您的需求...github / etianen / html5media

HTML5 视频和音频标签将媒体嵌入到文档中很容易作为嵌入图像。只需要单个或标签。 HTML5 允许您将视频和音频嵌入到您的文档中...

您所要做的就是在您的 HTML 文档中嵌入一个 javascript，然后使用某种魔法，或者缺少魔法……剩下的就完成了……

<script src="/path/to/your/html5media.min.js"></script>

我能够播放 .m3u8 电影，通过本地 html5 嵌入从桌面浏览器中的 Wowza 服务器流式传输，例如...

<video src="video.mp4"   controls preload></video>

然而，我还没有能够通过原生 HTML 控件让它们“全屏”显示……但我正在研究它……

【讨论】：

但这并不能回答 OP 的问题 - 你如何在 Mac 版 Safari 以外的浏览器中播放 M3U8（即 HTTP 直播流）。

以上是关于如何在所有 PC 浏览器中播放 m3u8 播放列表？的主要内容，如果未能解决你的问题，请参考以下文章

苹果cms如何实现在线浏览器播放m3u8格式的电视直播源？

关于H5播放Http Live Streaming m3u8格式视频

如何在 ckplayer 网页播放器中进行 m3u8 格式的流媒体直播

vue.js+video.js+videojs-contrib-hls支持PC端播放m3u8格式的视频

如何在所有PC浏览器中播放HTTP直播（HLS）？

有支持M3U8格式的HTML5播放器吗