【问题标题】:HTML5 Video in Chrome: forward/rewind not workingChrome 中的 HTML5 视频:前进/后退不起作用
【发布时间】:2017-06-07 09:20:13
【问题描述】:

这是一个 ASP.NET MVC 应用程序 - 使用大量 HTML5 视频。

会发生什么:当我在其他浏览器中尝试使用鼠标(手动)向前移动视频时,它运行良好;即使我点击暂停,移动轨道上的视频圈并点击播放,它仍然可以工作。

在 Chrome 中它有时会起作用(如果视频被缓存了我猜?),但大多数时候当我尝试用鼠标移动圆圈时,它只是回到原来的位置。即使有暂停的视频,我也无法从我想要的任何地方播放视频。

例如,此视频会发生这种情况。我有一种感觉,只有当我删除浏览器历史记录并且视频从零加载时才会发生这种情况。如果我尝试多次,稍后它会起作用(刷新页面或其他东西)。

打开这个例子:jsfiddle.net/1b9749et/

有什么经验吗?谢谢。

【问题讨论】:

  • 请链接到一个例子。我的猜测是您的视频不是由支持字节范围请求的机器提供,或者视频没有在前面使用 MOOV atom 编码。这是什么平台上的问题(Windows、macOS、iOS、Android)?
  • 非常感谢您的回答。该应用程序托管在 Azure Web 上。我已经编辑了帖子,您现在可以看到一个示例链接。这是 Windows。

标签: jquery html video


【解决方案1】:

所以,我使用 ffmpeg 重新编码了您的视频,将 MOOV atom 放在前面(见下文),将其上传到 Azure blob 存储,现在示例似乎可以正常工作。

./ffmpeg -y -i 9f99b62e-7d56-4816-993b-286239f243bc_x264.mp4 -movflags faststart DestFile.mp4

mp4 中的 MOOV atom 是告诉浏览器帧在哪里(以及其他内容)的元数据,因此越早加载和可用,浏览器就越早允许擦洗等

如果您想快速测试,我将在接下来的 48 小时内将托管在 https://jecathblob.blob.core.windows.net/samples/destfile.mp4 的视频保留下来

[编辑:] 将我的 BlobStorage 的 defaultStorageVersion 更新到最新版本,这似乎更好地支持 ByteRangeRequests(为此我使用了 this utility,如果这样更容易,可以共享一个预编译的 .exe)

[EDIT2:] 我已将编译后的版本上传到https://1drv.ms/u/s!AhulbaZgpLZTjNhE_QaT4ET5xX1B-w(链接将在 5 天后过期)。只需按照https://github.com/Plasma/AzureBlobUtility 的说明运行,即可将 DefaultStorageVersion 设置为 2016-05-31 (https://docs.microsoft.com/en-us/rest/api/storageservices/versioning-for-the-azure-storage-services)

【讨论】:

【解决方案2】:

为了修复 chrome 上的视频倒带和快进,只需添加 /stream?以您的 html 请求为例:

<video src="youre.website.ext/{fileId}">
fix.  <video src="your.website./{fileId}/stream?">

我的问题是视频快退和快进在 chrome 上不起作用,但在 mozzila 上运行良好。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-01-07
    • 1970-01-01
    • 2012-06-04
    • 1970-01-01
    • 2017-10-28
    • 2019-03-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多