播放视频框架在Chrome/Firefox上非常慢，但在Safari上却不
我有一个用例，其中包括在视频中寻找特定帧。帧变化的频率可能很高，因为它取决于鼠标的运动。我的问题是，根据浏览器的不同，更新可能非常流畅（Safari）或引入大量延迟（Chrome/Firefox）。
我想到了一个示例，使用以下代码测试浏览器之间的差异（这是 codepen ）。我正在使用此
HTML
<video id="player" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" preload="auto"/>
JS
window.onload = () => {
const player = document.getElementById("player")
setInterval(() => {
player.currentTime = (player.currentTime + 0.016) % 10
}, 16)
}
在我看来，Chrome和Firefox的处理时间的变化与Safari的变化不同，而我的用例在后者中得到了很好的支持。是否有任何方法可以使该作品在Chrome/Firefox中顺利进行？我检查了一些视频播放器库（例如，Plyr，React-player，Video-js），但它们都基于本机HTML5播放器。
I have a use case that consists in seeking specific frames in a video. The frequency of frame changes can be quite high as it depends on mouse movements. My problem is that depending on the browser the updates can be very smooth (Safari) or introduce a lot of latency (Chrome/Firefox).
I came up with an example to test the differences between browsers using the following code (here is a codepen). I am using this video that is 10 seconds long and 60fps and I play it frame-by-frame by changing its currentTime at an interval equals to the video's frame rate.
HTML
<video id="player" src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" preload="auto"/>
JS
window.onload = () => {
const player = document.getElementById("player")
setInterval(() => {
player.currentTime = (player.currentTime + 0.016) % 10
}, 16)
}
The main problem seems to me that Chrome and Firefox just handle video time changes differently than Safari, and my use case is well supported in the latter. Would there be any way to also make that work smoothly in Chrome/Firefox? I checked a few video player libraries (e.g., plyr, react-player, video-js) but they are all based on native HTML5 players.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
对于任何有类似问题的人，我发现问题与视频编码有关。重要的参数是键帧间隔，如果我正确地拿出它，则定义了特定帧呈现时构架框架的大小。这个数字越小，呈现时响应速度就越快，但是我想随着压缩信息较少，文件可以增长。
您可以使用
-g和-Min_Keyint使用FFMPEG https://ffmpeg.org/ffmpeg-codecs.html 。For anyone having similar issues, I found out the problem has to do with the video encoding. The significant parameter is the keyframe interval that, if I got it correctly, defines the size of the chunk of frames a specific frame would refer to when rendering. The smaller this number, the faster the response when rendering it, but I guess the files can grow bigger as less information is compressed.
You can modify this parameter using the
-gand-min_keyintoptions with ffmpeg https://ffmpeg.org/ffmpeg-codecs.html.