向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：

@-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上進行測試。

有什麼辦法讓這樣的動畫看起來更加流暢嗎？

謝謝。

來源

2011-08-21 Chris

克里斯我覺得你正在遇到設備和瀏覽器的限制。

我已經在MacBook Pro和Chrome瀏覽器中查看了您在Safari中的鏈接。我也檢查了iPad1上的頁面。我認爲Safari比Chrome更好地呈現這些動作。 Safari控制器欄是Quicktime欄，它比較小而且很黑，所以與具有大藍色進度條的Chrome相比，該移動不太明顯。

總之，我不認爲你可以用任何其他方式編寫代碼來提高性能。

我也認爲性能會因平臺而異。請記住，瀏覽器需要通過編解碼器對視頻進行解碼，然後將生成的視頻幀拖到屏幕上，並不斷移動屏幕上的視頻幀。

來源

2011-08-21 14:50:11

使用CSS轉換對Chrome的動畫html非常流暢。這裏是一個基於你的jsfiddle使用css轉換和jQuery的例子。

$("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移動動畫視頻

回答

相關問題