在HTML5中寻求MP4视频功能无法正常工作

Question

我是一名有用的助手，可以为您翻译文本。

我有一个asp.net mvc 5网站，在首页上需要显示一个mp4格式的视频。除了寻求功能之外，一切都很好。我花了几个小时寻找解决方案，但没有成功。

HTML元素：

<video id="appVideo" controls style="width: 100%; height: 100%">
        <source src="@Url.Action("HomePageVideo", "Home")"      type="video/mp4" />
    </video>

检索视频的控制器方法：

    [HttpGet]
    [AllowAnonymous]
    public ActionResult HomePageVideo()
    {
        return File(@"somePath\file.mp4", "video/mp4");
    } 

我错过了什么？提前致谢！

- Horea Botar

---

你使用的是哪个浏览器？你尝试在不同的浏览器中测试过吗？ - Donal

问题描述中的行为是在Chrome（43.0.2357.124m）中观察到的。即使我试图跳转到不同的时间，播放器也会忽略命令并逐秒显示内容。在Firefox（38.0.5）中，视频可以加载和播放，但是在第一次尝试跳转到视频的另一个部分时，播放器被阻止，并显示消息“没有找到支持格式和MIME类型的视频”。我还尝试了Safari（5.1.7），但播放器甚至没有显示 :| 。 - Horea Botar

Answer 1

问题很可能出现在服务器端，而不是客户端。

根据您如何托管视频，寻找功能的工作方式会略有不同。

例如，如果您使用“适当的”流媒体服务器和自适应比特率流媒体协议（如HLS、平滑流媒体、MPEG DASH等），那么您的客户端将能够轻松请求特定的视频“块”并跳转到它（即寻找功能）。

如果您使用HTTP“伪”流媒体（这可能更有可能），那么您的客户端仍应该能够仅请求视频的某个部分，但要支持此操作，您的服务器必须支持“Accept-Ranges”响应头。

这种机制实际上允许客户端从服务器请求文件的一部分，它允许浏览器在播放之前通过只下载视频的小块来节省带宽，并且还允许它通过请求与用户寻求的位置相对应的块来轻松寻找。

并非所有服务器都支持此功能或已经配置好，因此这可能是您的问题所在。

请注意，您的mp4视频还必须设置为在已下载元数据之前支持播放（请参见：http://multimedia.cx/eggs/improving-qt-faststart/），但从您的描述中看来，您已经具备了这个条件。

- Mick

---

如果服务器不支持寻址，您也可以使用playbackSpeed来快进。有人可以使用setInterval来“寻找”您想要的点，然后再次减速。 - JacksonHaenchen

以下是上述方法的函数：function seekUsingSpeed(video, target) { const keepWatch = setInterval(() => { if(video.currentTime >= target) { video.playbackRate = 1; clearInterval(keepWatch); } }, 10) try { while(true) { video.playbackRate += 1; } } catch {} } - JacksonHaenchen