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

Question

所以我使用免费托管，我的服务器上的视频很少，一切正常，除了视频需要大约 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 语句，这一切都有效。但是不要认为这对我的问题很有用，因为我不知道从哪里开始或从哪里开始。我知道它应该如何将视频分成小块，但不知道该怎么做。

Answer 1

鉴于你所说的，这对你来说可能太技术性了。但是如果你想在一个简单的 http 服务器上流式传输高质量的视频，你可以尝试使用 MPEG-DASH。这将涉及两个步骤：将您的视频编码为 MPEG-DASH 格式。这将为您提供几个不同质量的流。这些流将在视频播放时由您的用户自适应下载……想想 YouTube。向您的页面添加一些额外的代码以在浏览器中支持这一点。我建议查看DASH IF Reference Client。我知道这可能没有足够的信息继续下去，但如果您有兴趣，我可能会跟进答案。

Answer 2

你不需要任何特别的东西。一个普通的视频标签会做：<video&nbsp;src="videos/roses.mp4"></video>但是，您需要确保moovMP4 文件中的原子位于开头。为此，您可以使用 FFmpeg：ffmpeg&nbsp;-i&nbsp;roses.mp4&nbsp;-movflags&nbsp;faststart&nbsp;-codec&nbsp;copy&nbsp;roses-optimized.mp4我想你会发现这会大大改善这种情况。