jquery Chrome中的HTML5视频:前进/后退不工作

xxe27gdn  于 2023-10-17  发布在  jQuery
关注(0)|答案(3)|浏览(104)

这是一个ASP.NETMVC应用程序-使用了大量的HTML5视频。
发生了什么:当我尝试在其他浏览器中用鼠标(手动)向前移动视频时,它工作得很完美;即使我点击暂停,移动轨道上的视频圈并点击播放,它也会再次工作。
在Chrome中,它只是有时工作(如果视频被缓存,我猜?),但大多数时候当我试图用鼠标移动圆圈时,它只是回到原来的地方。即使有暂停的视频,我也无法从任何我想要的地方播放视频。
例如,它发生在这个视频。我有一种感觉,只有当我删除浏览器历史记录和视频加载从零开始时,它才会发生。如果我尝试了几次,后来它的工作(刷新页面或东西)。
打开此示例:jsfiddle.net/1b9749et/
有经验吗?谢谢.

z9ju0rcb

z9ju0rcb1#

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

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

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

a0x5cqrl

a0x5cqrl2#

为了解决视频倒带和快进在Chrome只是添加/流?您的HTML请求例如:

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

我的问题是视频倒带和前进不工作的Chrome,但工作良好的mozzila。

zour9fqk

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>

const audioElement = this.$refs[this.customRef];

                // Make the HTTP request to get the audio data
                this.bp.request('get', this.url, { responseType: 'arraybuffer' })
                .then(response => {
                    if (response.status === 200) {
                    this.file = response.data;
                    // Convert the response data into a Blob
                    const blob = new Blob([response.data]);

                    // Create a URL for the Blob
                    const blobUrl = URL.createObjectURL(blob);

                    // Set the Blob URL as the source for the audio element
                    audioElement.src = blobUrl;

                    // Optionally, you can preload and play the audio
                    audioElement.preload = 'auto';
                    } else {
                       console.error('Error fetching audio data');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });

(im使用vue,如果你使用普通的JavaScript,那么不要使用ref,使用id)

相关问题