如何让我的 HTML 视频源成为硬盘驱动器中的 .m3u8 文件？ 用于流媒体

编程问答 2022-05-22

问题描述

我正在尝试制作一个可以流式传输的网站。我不想使用 Twitch 或 Youtube 或其他任何东西，我只想独立使用。因此，我遵循了有关使用 HLS 和 Videojs 进行流式传输的指南：https://www.youtube.com/watch?v=sRdDNhALeVo

我正在运行 Nginx。我的 D: 驱动器上有一个临时文件夹，其中有一个名为 hls_temp 的文件夹。当我在 OBS 上直播时，会创建一个名为 stream 的文件夹，里面是 .m3u8 文件，并且我的流（文件）的块被写入该文件夹。当我通过访问 http://localhost:8050/index-hls.html 检查它是否工作时，它工作正常。我可以看到我的直播。然后我将 videojs 实现到我的另一个站点（Videojs 现在显然具有本机 HLS 流媒体支持），源代码是：<source src="/hls/stream/index.m3u8" type="application/x-mpegURL">（这是 index-hls.html 文件正在使用的内容并且可以正常工作）。不起作用，videojs 只是告诉我“无法加载媒体，因为服务器或网络出现故障，或者因为格式不受支持。”。然后我尝试将其更改为："D:/streamtemp/temp/hls_temp/stream/index.m3u8"，现在媒体播放器不再有错误消息，而是永远加载。那么，朝着正确的方向迈出了一步？

我假设问题是源不能是我电脑上的文件夹，因为 HTML 并不真正理解如何从中读取。我在网上看到的每个例子，来源都是来自一些文件托管网站的链接，比如streamBox。这是将源作为 .m3u8 流的唯一方法吗？例如，无法将该临时文件夹放在我的新城市站点存储中，并让 Nginx 将文件写入那里而不是我的 D: 驱动器？我的问题真的是，如何将我的视频源放在 HTML 上，成为我 D: 驱动器上的 .m3u8 文件？我只是在寻找一个不花钱（或至少很少花钱）的答案！

这是完整的 HTML 文件（如果您还需要查看其他内容，例如我的 Nginx.config 文件，请告诉我）：

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/video.js@6.7.1/dist/video.js"></script>
<script src="https://unpkg.com/@videojs/http-streaming@0.9.0/dist/videojs-http-streaming.js"></script>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<title>Who Cares</title>
</head>
  <body>
  <video-js id="my_video_1" class="vjs-default-skin" controls preload="auto" width="640" height="268">
    <source src="/hls/stream/index.m3u8" type="application/x-mpegURL">
  </video-js>
  
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js"></script>
  
  <script>
    var player = videojs('my_video_1');
  </script>
</body>
</html>

解决方法

如果您想访问计算机上的文件，请使用 file URI scheme。

例如在你的情况下file:///d:/streamtemp/temp/hls_temp/stream/index.m3u8

但是要小心——访问存储在本地机器上的文件会带来一些警告，如果您将此 HTML 托管在服务器上（例如通过 HTTP(S)），this request will most likely be blocked。

如果您在 NGINX 上运行它，您也应该将此文件上传到您的服务器。

我不知道您的 M3U8 文件的内容，但如果它通过您磁盘上的绝对链接引用文件，浏览器也将无法加载该文件。

htmlhttp-live-streamingm3u8video.js