2

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.

Chris
  • 21
  • 2

2 Answers2

1

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/

user2679148
  • 11
  • 1
0

Chris I feel that you are running into the limits of the devices and browsers.

I have viewed your link in Safari on a MacBook Pro as well as Chrome. I have also checked the page on an iPad1. I think Safari renders the moves better than Chrome. The Safari controller bar is the Quicktime bar which is smaller and dark so the movement is less noticeable than Chrome which has a big blue progress bar.

In short I don't think you could write your code in any other fashion that would improve the performance.

I also think that the performance is going to vary between platforms as well. Remember the browser needs to decode the video via a codec, draw the resulting video frames to screen as well as constantly move the video frames around on screen.

Gus D
  • 139
  • 2
  • 18