Chrome 中的 HTML5 视频 currentTime 重绘问题

Posted

技术标签:

【中文标题】Chrome 中的 HTML5 视频 currentTime 重绘问题【英文标题】:HTML5 video currentTime repaint issue in Chrome 【发布时间】:2015-04-03 11:34:26 【问题描述】:

我一直在努力解决这个问题。看看我的传奇故事和下面的 codepen:

我正在玩一些 html5 视频 currentTime javascript 效果。这个特别将 currentTime 绑定到圆的角度和鼠标位置,使用 d3.js 创建。

我的问题是 Chrome 的性能不佳。由于某种原因,效果非常不稳定,实际上反应迟钝。如果你在 Firefox 中运行它,性能会好很多(尽管还是有点不稳定)。

现在,我认为这与视频质量有关。是不是太穷了?为了比较,将 src 中的“sky4.mp4”替换为“apple.mp4”。这是我从 Apple 的 iPhone6 网站 (https://www.apple.com/iphone-6/) 中提取的视频,它的质量非常高,而且效果实际上在两种浏览器上都运行得更加流畅。

我比较了视频质量,它们是相同的 FPS (~30fps)。 Apple 的 vid 具有比原始视频 (6mpbs) 更高的分辨率和更高的比特率 (10mbps)。但我假设如果我所做的只是改变 currentTime,那么 FPS 应该是唯一重要的事情?

我猜不是,因为替换 src 文件并检查“space.mp4”。这是一个质量非常低的视频(15fps、非常低的分辨率和 130 kbps)。它在 Chrome 和 Firefox 上运行都非常流畅。

这里发生了什么?为什么我的质量一般的视频无法使用这种效果,而低质量和高质量的视频却可以?任何人都可以对此有所了解吗? http://codepen.io/jayventura/pen/EaweaJ

(code to make *** happy)

【问题讨论】:

我查看了 codepen,但您的 Dropbox 视频在 chrome 控制台中引发了“加载资源失败:net::ERR_CONNECTION_REFUSED”错误。可以使用不需要认证的链接吗? 【参考方案1】:

它们对我来说都很慢,可能是因为我的机器较旧/较慢。但我注意到在 sky4.mp4 中跳转会比其他两个使用更多的 CPU。

除了更长(Apple.mp4 为 7 秒,而 space.mp4 为 1 秒)之外,sky4.mp4 是三个使用 H.264 High profile 编码的唯一一个;另外两个使用主配置文件。 High profile 需要更多计算,因此如果使用 H.264 Main 重新编码,您可能会获得更快的性能。不过,这种性能可能取决于平台。当然,主要配置文件效率较低,质量/位明智。

它更长的事实也可能是一个问题。由于(我假设)您将视频的全长映射到圆的 360 度,移动光标相同的量将移动视频的更多帧和更长的视频。

视频格式旨在从头到尾播放;跳来跳去和向后打是非常低效的。所以你可以做的另一件事是尝试将整个视频预渲染到一堆画布元素。我不想用既长又高分辨率的视频来做这件事,但我已经用小视频做了。

在视频元素离屏的情况下,创建一个相同大小的 2D 画布元素。将视频元素的 currentTime 设置为第一帧,等待其 onseeked 事件,然后将视频绘制到画布上。创建另一个画布并为下一帧重复,依此类推。然后,您可以立即显示显示您需要的框架的任何画布。

这要求视频从与其所在的网页相同的域加载,或者使用允许将其用作画布的图像源的 CORS 标头提供。

另一个困难是 JavaScript 没有很好的方法来找出视频的帧速率。但是,如果您只对自己的视频执行此操作,您就会知道帧速率。

【讨论】:

认真的吗? 0_o :/

以上是关于Chrome 中的 HTML5 视频 currentTime 重绘问题的主要内容,如果未能解决你的问题,请参考以下文章

Safari 和 Chrome 中的 HTML5 视频海报属性

Chrome 中的 HTML5 视频 currentTime 重绘问题

用于数字标牌的 Chrome 中的 HTML5 视频自动播放

Chrome Html5 视频无法显示白色,背景为灰色

html5 中的 hls 在 android chrome 浏览器中不起作用

chrome 可以播放 html5 mp4 视频但 html5test 说 chrome 不支持 mp4 视频编解码器