Добавление анимации движения CSS3 в видео HTML5 - PullRequest
Новая
       31

Добавление анимации движения CSS3 в видео HTML5

2 голосов
/ 21 августа 2011

Я пытаюсь добавить анимацию движения в видео 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.

Есть ли способ сделать такую ​​анимацию более плавной?

Спасибо.

Ответы [ 2 ]

1 голос
/ 16 января 2014

Использование CSS-переходов довольно просто для анимации HTML для Chrome.Вот пример, основанный на вашем jsfiddle с использованием CSS-переходов и jquery. 

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

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

0 голосов
/ 21 августа 2011

Крис Я чувствую, что вы работаете в пределах устройств и браузеров.

Я просматривал вашу ссылку в Safari на MacBook Pro, а также на Chrome. Я также проверил страницу на iPad1. Я думаю, что Safari отрисовывает движения лучше, чем Chrome. Панель контроллера Safari - это панель Quicktime, которая меньше и темнее, поэтому движение менее заметно, чем в Chrome с большой синей шкалой прогресса.

Короче говоря, я не думаю, что вы могли бы написать свой код любым другим способом, который улучшил бы производительность.

Я также думаю, что производительность будет варьироваться в зависимости от платформы. Помните, что браузер должен декодировать видео с помощью кодека, выводить на экран полученные видеокадры, а также постоянно перемещать видеокадры на экране.

...