HTML5 <video> 标签性能

Question

I have a <video> element at the top of my page playing an animation in the background (very similar to the one found on the Google Hangouts page). On most computers, the video plays smoothly and it seems fine, but on older hardware there is a lot of lag and the browser slows down quite a lot.

Is there anyway to detect the performance of the video playback? I'd like to either replace the video with a static image or pause the video if performance is an issue.

Answer 1

Use the video metrics if available in your browser. Here's an example using webkit prefixed DroppedFrameCount.

http://git.chromium.org/gitweb/?p=chromium.git;a=blob;f=chrome/test/data/media/html/media_stat_perf.html

See also: http://wiki.whatwg.org/wiki/Video_Metrics for the Moz prefix.

Answer 2

您可以使用获取加载页面的时间戳来确定用户加载页面的速度，然后如果其带宽低于指定阈值，则提供图像而不是变量。