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

Question

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

29

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

- sri

m3u8 播放列表文件是由 Nullsoft 团队为 Winamp 音乐播放器创建的播放列表文件。有两个挑战：1）文件路径可以是客户端机器上本地存在的绝对文件，2）也可以是指向远程文件的绝对 URL 链接。如何知道播放列表中包含的文件来自本地文件？ - Buhake Sindi

我用了Flowplayer，它是免费开源的，而且非常易于使用。 - anu

我在Windows 10上使用Microsoft Edge来流式传输m3u8文件。 - S Meaden

5个回答

6

微软Edge浏览器可以播放m3u8文件，但您必须拥有Windows 8或10操作系统...只需打开Microsoft Edge浏览器并输入m3u8文件的URL链接即可开始播放。

- user6375752

你能提供更多关于这个的信息吗？http://stackoverflow.com/help/how-to-answer - Rich Benner

有关支持本地HLS的浏览器列表，请参见https://en.wikipedia.org/wiki/HTTP_Live_Streaming#Supported_players_and_servers。 - f.cipriani

2

我使用了Flowplayer，它很容易设置并且能在所有浏览器上运行并且是免费的，除非你想要自己的品牌...（不像JW Player）。

下载Flowplayer请点击这里

我通过跟随此演示成功地设置了HLS播放。

请点击HLS演示

需要注意的一件事情是，演示中没有提到：

您将需要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>

- anu

能否在用户的浏览器中离线提供HLS格式的视频？能否将HLS视频存储在用户的浏览器中（如Indexed db等），然后直接从那里播放（至少在短期内）？ - Vikas Bansal

@VikasBansal 你的意思是将浏览器设置为离线模式吗？ - anu

实际上，我有这样一种情况，需要构建一个功能，使视频可以离线使用。就像YouTube离线视频一样，但是在浏览器上。这是我的实际问题：https://stackoverflow.com/questions/45252054/how-to-store-hls-m3u8-formatted-video-offline-on-browser-to-play-when-internet - Vikas Bansal

1

@VikasBansal 最简单和最好的解决方案是公开提供标准的mp4文件版本，可供普通下载，并使用m3u8进行流媒体传输。 - David C

0

<!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链接即可。

- Abhijit Haldar

-4

我不太明白.m3u8播放列表的情况...但我并不特别喜欢它们...话虽如此，this似乎认为它可以满足你的需求...github/etianen/html5media

HTML5视频和音频标签使将媒体嵌入文档变得像嵌入图像一样容易。只需要一个单独的

你所要做的就是在你的 HTML 文档的中嵌入一段 JavaScript 代码，接着一些神奇的事情会自动发生，或者也可能没有任何神奇...

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

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

<video src="video.mp4" width="320" height="240" controls preload></video>

然而，我尚未能够通过本地HTML控件使它们进入“全屏”模式...但我正在研究中。

- Alex Gray

2

然而，这并没有回答提问者的问题 - 如何在除了Mac上的Safari之外的浏览器中播放M3U8（即HTTP Live Streams）。 - Haqa

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

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

- Haqa · Accepted Answer

不幸的是，目前HTML5对视频的支持非常分散，可以说几乎是无用的（至少作为主要关注点），M3U8播放列表是苹果HTTP Live Streaming的一部分，从名称中可以看出，它们（或者至少最初）是苹果标准，没有其他浏览器使用它们或HTTP Live Streaming。

您可以安装一些程序以添加对HLS的支持。例如，一些公司已经开发了用Flash或Silverlight编写的HLS播放器。Yospace已经为HLS播放开发了Flash SDK，其中包括JWPlayer mediaprovider，它允许您在非Flash设备上使用JW的自动HTML5回退（即：iPhone / iPad），而所有其他设备将获得JWPlayer体验。

许多公司承诺“标准化浏览器视频支持”，但他们所有的承诺（到目前为止）都未兑现，因此，无论您选择哪个选项，都会有所妥协。