jquery: animation de l'élément vidéo html5?

Question

est-il possible d'animer un élément vidéo html5

<div id="cont"> 
    <video id="movie" width="320" height="240" preload controls> 
     <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'> 
     <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
     <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> 
    </video>  
    </div> 

<script type="text/javascript"> 
    $(document).ready(function(){ 

     $('#cont').animate({"left": "500px"}, "fast"); 
     //$('#movie').css("left", "300px"); 
    }); 
    </script> 

Cela ne semble pas travailler!

Answer 1

left n'aura aucune signification sauf s'il a une position autre que static (the default). Donnez-lui un premier attribut position: relative css, comme ceci:

$('#cont').css('position', 'relative').animate({"left": "500px"}, "fast");​​​​​​​​​​ 
//or... 
$('#cont').css({ position: 'relative'}).animate({"left": "500px"}, "fast");​​​​​​​​​​ 

You can see a quick demo here

Alternativement, et mieux encore, donner le <div>, <video>, tout ce que vous voulez animer, cet attribut dans la feuille de style (soit par le ID ou une classe), comme ceci:

#cont { position: relative; } 
//or... 
.relative { position: relative; } 

Dans la deuxième approche, vous ajouteriez un class="relative" à l'élément que vous animez. Avec cette approche, votre code actuel fonctionne, alors choisissez une méthode, feuille de style ou .css(), fonctionne.

Answer 2

Au moins dans WebKit, vous pouvez faire beaucoup avec la vidéo et de l'animation:

http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/

: o