这是一个ASP.NETMVC应用程序-使用了大量的HTML5视频。
发生了什么:当我尝试在其他浏览器中用鼠标(手动)向前移动视频时,它工作得很完美;即使我点击暂停,移动轨道上的视频圈并点击播放,它也会再次工作。
在Chrome中,它只是有时工作(如果视频被缓存,我猜?),但大多数时候当我试图用鼠标移动圆圈时,它只是回到原来的地方。即使有暂停的视频,我也无法从任何我想要的地方播放视频。
例如,它发生在这个视频。我有一种感觉,只有当我删除浏览器历史记录和视频加载从零开始时,它才会发生。如果我尝试了几次,后来它的工作(刷新页面或东西)。
打开此示例:jsfiddle.net/1b9749et/
有经验吗?谢谢.
3条答案
按热度按时间z9ju0rcb1#
因此,我使用ffmpeg重新编码了您的视频,将MOOV原子放在前面(见下文),将其上传到Azure blob存储,现在示例似乎可以正常工作。
MP4中的MOOV原子是元数据,它告诉浏览器帧的位置(以及其他内容),因此它越早加载并可用,浏览器就越早允许擦洗等
如果你想快速测试,我会离开在https://jecathblob.blob.core.windows.net/samples/destfile.mp4托管视频为未来48小时
[EDIT:]更新了我的BlobStorage的默认版本到最新版本,似乎更好地支持ByteRangeRequests(为了做到这一点,我使用了this utility,如果更容易的话,可以共享预编译的.exe)
[编辑2:]我已经上传了编译版本到https://1drv.ms/u/s!AhulbaZgpLZTjNhE_QaT4ET5xX1B-w(链接将在5天内过期)。只需按照https://github.com/Plasma/AzureBlobUtility的说明运行,将默认版本设置为2016-05-31(https://learn.microsoft.com/en-us/rest/api/storageservices/versioning-for-the-azure-storage-services)
a0x5cqrl2#
为了解决视频倒带和快进在Chrome只是添加/流?您的HTML请求例如:
我的问题是视频倒带和前进不工作的Chrome,但工作良好的mozzila。
zour9fqk3#
对我来说,问题是我没有把文件的路径放在src标签中,而是放在了一个调用返回文件的php控制器的url中。比如这样:
< audio autobuffer="" preload="auto" controls="controls" src="http://127.0.0.1:8000/getFile/file123">
这样做是因为文件不在公共文件夹中,为了访问文件,我必须先做一些检查,比如谁登录了。
这在Firefox中有效,但在基于Chrome的浏览器中无效。从我在网上收集的信息来看,它与标题有关,状态码应该返回206而不是200。然而编辑它们并没有为我修复它。
我是如何修复它的,而不是直接在audio标签中调用url,我使用axios来获取文件,并将文件转换为blob,并将其用作audio标签的src:
< audio:ref=“customRef”autobuffer preload controls>
(im使用vue,如果你使用普通的JavaScript,那么不要使用ref,使用id)