Question

我正在尝试为HTML5视频添加动画动画，但结果非常不稳定且根本不流畅。

HTML是：

<div id="video">
    <video width="320" height="240" controls="controls">
        <source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4"/>
    </video>
</div>

CSS：

@-webkit-keyframes movement {
    0%  { -webkit-transform: translate3d(0px, 0px, 0); }
    50% { -webkit-transform: translate3d(100px, 100px, 0); }
    100%  { -webkit-transform: translate3d(0px, 0px, 0); }
}

#video {
    -webkit-animation: movement 20s linear infinite;
}

以下是小提琴链接：http://jsfiddle.net/LSAm5/

运动非常不稳定，在视频的边框和控制中非常明显。我主要测试的是Chrome和iPad。

有没有办法让这样的动画看起来更流畅？

感谢。

Answer 1

使用css过渡非常流畅，可以为Chrome设置html动画。这是一个基于你的jsfiddle使用css过渡和jquery的例子。

$("video").css({
    '-webkit-transform': 'translateX(100px) translateY(100px)',
    'webkitTransition' : 'all ' + 10000 + 'ms '});

http://jsfiddle.net/LSAm5/144/

Answer 2

Chris我觉得你遇到了设备和浏览器的极限。

我在MacBook Pro和Chrome上浏览过Safari中的链接。我还在iPad1上查看了该页面。我认为Safari比Chrome更好地呈现了这些动作。 Safari控制器栏是Quicktime栏，它更小更暗，所以移动不如Chrome有明显的蓝色进度条。

简而言之，我认为您不能以任何其他方式编写代码来改善性能。

我也认为平台之间的性能也会有所不同。请记住，浏览器需要通过编解码器解码视频，将生成的视频帧绘制到屏幕上，并不断在屏幕上移动视频帧。

将CSS3移动动画添加到HTML5视频

2 个答案: