javascript - 如何在网页上流式传输(分段)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

你不需要为此做任何特别的事情。一个普通的视频标签就可以:

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

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

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

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