当前位置： 文江博客话题详情

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

发布于 2024-10-28 06:46:16 字数 97 浏览 1 评论 0原文

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

原文

By default m3u8 files can be played in Mac Safari browser, but not in any other desktop browsers. What needs to be done to play them in all browsers, both supporting HTML5 and non-HTML5?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

各自安好 2024-11-04 06:46:16

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

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

各个公司做出了许多“标准化浏览器视频支持”的承诺，但它们（到目前为止）都没有实现，所以无论您选择什么选项，都将是某种妥协。

Unfortunately HTML5 support for video is so fragmented that it is, to all intents and purposes, useless (at least as a primary focus) at this point in time. M3U8 playlists are Apple HTTP Live Streaming, and as you can tell from the name, they are (or at least started out as) an Apple standard, no other browser uses them, or HTTP Live Streaming.

There are some programs you can install to add support for HLS. Some companies have, for example, produced HLS players written in Flash, or Silverlight. Yospace has produced a flash SDK for HLS playback which includes a JWPlayer mediaprovider which allows you to use JW's automatic HTML5 fallback on non-flash devices (read: iPhone/iPad), while all others get the JWPlayer experience.

There have been many promises from various companies to "standardize browser video support" but they have all (so far) come to nothing, so whatever option you choose, it's going to be a compromise of sorts.

回复 原文
拥抱我好吗 2024-11-04 06:46:16

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

Microsoft Edge plays m3u8 files but you must have windows 8 or 10...
Just open Microsoft Edge and write the url of the m3u8 file and it will start playing.

回复 原文
生寂 2024-11-04 06:46:16

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

在此处获取 Flow Player Flow Player 下载

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

HLS 演示

需要注意的一点是演示中没有提到这一点。

  1. 你将需要 jquery > 1.7
  2. 您将在 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>

I used flowplayer. It's very easy to setup and get going and it works on all browsers and is free, unless you want your own branding... (unlike JW player).

Get flow player here Flow Player download

I was successfully able to set up HLS playback by following this demo.

HLS Demo

One thing to note, which the demo does not mention is that.

  1. You will need jquery > 1.7
  2. You will include player's skin CSS in the HTML

Here is my working page that runs HLS, for example:

<!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>
回复 原文
各自安好 2024-11-04 06:46:16
<!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 链接即可。

<!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

Try this, with your playlist/video link. Just change the src link.

回复 原文
怪我入戏太深 2024-11-04 06:46:16

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

HTML5视频和音频标签使
将媒体嵌入到文档中如此简单
作为嵌入图像。所需要的只是
单个或标签。
HTML5 允许您将视频和音频嵌入到文档中...

你所要做的就是在你的 HTML 文档中嵌入一个 javascript，以及某种魔法，或者缺乏魔法......剩下的就完成了......

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

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

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

但是，我还没有能够让它们通过本机 HTML 控件“全屏”...但我正在研究它..

I don't exactly understand what the deal is with .m3u8 playlists... but I don't particularly like them.. That said, this seems to think it does what you want... github / etianen / html5media

HTML5 video and audio tags make
embedding media into documents as easy
as embedding an image. All it takes is
a single or tag.
HTML5 allows you to embed video and audio into your document...

All you have to do is embed a javascript in the of your HTML doc, and some sort of magic, or lack thereof... does the rest..

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

I was able to play .m3u8 movies, streaming from a Wowza server in desktop browsers via a native html5 embed, like...

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

I have NOT, however, yet been able to get them to go "fullscreen" via native HTML controls... but I'm looking into it..

回复 原文
~没有更多了~

关于作者

不爱素颜

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文