时间戳

首页 > 解决方案 > 如何在网页上流式传输（分段）mp4 视频

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

问题描述

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

标签： javascriptphphtmlvideostream

解决方案

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

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

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

推荐阅读