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

发布于 2024-12-01 01:41:11 字数 812 浏览 2 评论 0原文

我正在尝试向 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 上进行测试。

有没有什么办法可以让这样的动画显得更加流畅呢？

谢谢。

原文

I am trying to add a movement animation to a HTML5 video, but the result is very shaky and not smooth at all.

The HTML is:

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

And the 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;
}

Here is the fiddle link: http://jsfiddle.net/LSAm5/

The movement is very shaky, it is very noticeable in the borders and the controls of the video.
I am mostly testing in chrome and iPad.

Is there any way to make such an animation appear more smooth?

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我不是你的备胎 2024-12-08 01:41:11

使用 css 过渡对于 Chrome 的 html 动画来说非常流畅。这是一个基于 jsfiddle 使用 css 转换和 jquery 的示例。

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

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

Using css transitions is pretty smooth for animating html for Chrome. Here is an example based off of your jsfiddle using css transitions and jquery.

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

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

回复收藏 0 原文

娇纵 2024-12-08 01:41:11

克里斯，我觉得您正在遇到设备和浏览器的限制。

我已在 MacBook Pro 和 Chrome 上的 Safari 浏览器中查看了您的链接。我还在 iPad1 上检查了该页面。我认为 Safari 比 Chrome 渲染动作更好。 Safari 控制器栏是 Quicktime 栏，它较小且较暗，因此与具有蓝色大进度栏的 Chrome 相比，移动不太明显。

简而言之，我认为您无法以任何其他方式编写可以提高性能的代码。

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

回复收藏 0 原文

~没有更多了~