HTML5 비디오에 CSS3 무비 클립 추가하기

HTML5 비디오에 무브먼트 애니메이션을 추가하려하지만 결과가 매우 불안정하고 전혀 매끄럽지 않습니다.HTML5 비디오에 CSS3 무비 클립 추가하기

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 : http://jsfiddle.net/LSAm5/

운동, 그것은 국경에서 매우 눈에 띄는 매우 불안정하다 : 여기

@-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; 
}

는 바이올린 링크입니다 및 비디오의 컨트롤. 저는 주로 크롬과 iPad에서 테스트하고 있습니다.

이러한 애니메이션을 더 부드럽게 표시 할 수있는 방법이 있습니까?

감사합니다.

출처

2011-08-21 Chris

Chris 저는 여러분이 장치와 브라우저의 한계에 부딪히고 있다고 생각합니다.

MacBook Pro 및 Chrome에서 Safari의 링크를 보았습니다. 나는 또한 iPad1에서 페이지를 확인했습니다. Safari가 Chrome보다 더 나은 동작을 렌더링한다고 생각합니다. 사파리 콘트롤러 바는 작고 어두운 Quicktime 바이며, 파란 진행 바가 큰 Chrome보다 움직임이 눈에 띄지 않습니다.

간단히 말해서 성능을 향상시키는 다른 방법으로 코드를 작성할 수 있다고 생각하지 않습니다.

성능 또한 플랫폼마다 다를 것이라고 생각합니다. 브라우저가 코덱을 통해 비디오를 디코딩하고 결과 비디오 프레임을 화면에 그려야하며 비디오 프레임을 화면에서 계속 움직여야한다는 것을 기억하십시오.

출처

2011-08-21 14:50:11

CSS 전환을 사용하면 Chrome 용 HTML 애니메이션 효과가 매우 부드럽게 나타납니다. 다음은 CSS 전환 및 jquery를 사용하여 jsfiddle을 기반으로 한 예제입니다.

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

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

출처

2014-01-15 21:50:21 user2679148

HTML5 비디오에 CSS3 무비 클립 추가하기

답변

관련 문제