如何在网页上流式传输（分段）mp4 视频答案

【问题标题】：How to stream(segment) mp4 video on webpage如何在网页上流式传输（分段）mp4 视频
【发布时间】：2019-11-26 20:30:11
【问题描述】：

所以我使用免费托管，我的服务器上的视频很少，一切正常，除了视频需要大约 10-20 秒加载然后开始播放，所以我想使用流媒体。问题是我不知道该字段和托管不支持 node.js 但我认为是 php 7。

尝试将 video.js 与 hls 一起使用，但我不知道如何使用它，我没有在网上找到任何合理或好的教程。

所以任何帮助都会很棒，重点关注什么，一些示例的链接，非常新手如此详细的教程会有所帮助。

这是在 html 中：

<link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet" />

<div class="video">
    <video id="video" class="video-js" width="1024" height="576" type="video/mp4" src="videos/merci.mp4" autoplay controls data-setup=""></video>
</div>
<span id="naziv">test text</span>


<script src="https://vjs.zencdn.net/7.5.5/video.js"></script>

我的 .js 中有这个

document.getElementById('video_html5_api').src = "videos/roses.mp4";

当然还有其他部分，但是视频是用随机整数随机选择的，然后是 switch 语句，这一切都有效。但是不要认为这对我的问题很有用，因为我不知道从哪里开始或从哪里开始。我知道它应该如何将视频分成小块，但不知道该怎么做。

【问题讨论】：

嗨！欢迎来到 Stackoverflow！请提供Minimum, Reproducible Example，我相信我们愿意提供帮助。
编辑了帖子
这是因为 video.js 改变了视频元素的结构和 id，所以使用默认 id 不起作用

标签： javascript php html video stream

【解决方案1】：

你不需要任何特别的东西。一个普通的视频标签就可以了：

<video src="videos/roses.mp4"></video>

但是，您需要确保 MP4 文件中的 moov 原子位于开头。为此，您可以使用 FFmpeg：

ffmpeg -i roses.mp4 -movflags faststart -codec copy roses-optimized.mp4

我想你会发现这会大大改善这种情况。

【讨论】：

你能详细说明一下吗？比如我应该在哪里添加和使用它？
@IvanJerkovic <video> 标签可以在你想要的任何地方出现在你的页面上。 FFmpeg 命令，您在计算机上运行以优化视频，然后再将其上传到服务器。
@IvanJerkovic 你清除了缓存等等？（而且，您确实有足够的带宽来流式传输视频，对吗？）您可以发布 MP4 的链接吗？
@IvanJerkovic 该网址对我不起作用。返回一些 HTML 页面。
嗯可能是因为我已经访问了视频？好吧，这是播放上述视频的 html 页面projectbestac.epizy.com/bestac.html

【解决方案2】：

鉴于您所说的，这对您来说可能过于技术化。但是如果你想在一个简单的 http 服务器上流式传输高质量的视频，你可以尝试使用 MPEG-DASH。这将涉及两个步骤：

将您的视频编码为 MPEG-DASH 格式。这将为您提供几个不同质量的流。这些流将在视频播放时由您的用户自适应下载……想想 YouTube。
向您的页面添加一些额外代码以在浏览器中支持此功能。我建议查看DASH IF Reference Client。

我知道这可能没有足够的信息继续下去，但如果您有兴趣，我可能会跟进答案。

【讨论】：

好吧，您的解决方案似乎最有前途，我不需要任何花哨的东西，只需立即（或 1-2 秒）开始播放视频，而不是等待 20 秒。我一直在寻找，如果它是偶数文件，它需要 mpd 文件或使用 mp4box 来分割 mp4 文件。我只是累了花了 5 小时试图解决这个问题
我一直在使用 Sorenson Squeeze 将视频编码为 MPEG-DASH，但看起来制作它的公司去年破产了。 MPEG-DASH 设置起来有点麻烦，但是一旦你开始使用它，你就可以提供高质量的视频，它可以快速启动并且不会在慢速连接时缓冲。
为了跟进我的上一条评论，我想找到 Sorenson Squeeze 的替代品，因为它不再受支持。这个仅限 ffmpeg 的解决方案看起来很有帮助：developer.mozilla.org/en-US/docs/Web/HTML/…。我还没有尝试过。如果你最终使用它并且它有效，请告诉我。

【解决方案3】：

我的第一个 .mp4 视频在完全下载之前无法播放
我尝试了另一个，它立即开始播放（流媒体）
所以这取决于 .mp4 视频是否会流式传输

【讨论】：

为什么会这样，请参阅下面的答案。
@Brad 不是每个人都可以使用 cli 并且用户需要下载 ffmpeg 到那个
我认为你在谈论缓存。浏览器会保存该数据并在您下次加载时更轻松地播放？
@IvanJerkovic 您的服务器需要支持 http 范围请求，以便它可以从浏览器想要的任何位置请求文件数据。通过mdn了解更多信息
@Pogromist 任何制作网页的人都/应该完全有能力下载 FFmpeg 并将简单的命令复制/粘贴到他们的终端中。比您的建议要好得多...什么，放弃并且不打扰任何不起作用的视频？