jquery: animating html5 video element?

Question

is it possible to animate a html5 video element

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

this seems not to work!

thank you for your help

Answer 1

left will have no meaning unless it has a position other than static (the default). Give it a position: relative css attribute first, like this:

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

You can see a quick demo here

Alternatively, and even better, give the <div>, <video>, whatever you want to animate, this attribute in the stylesheet (either via the ID or a class), like this:

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

In the second approach you'd add a class="relative" to the element you're animating. With this approach, your current code works, so choose a method, stylesheet or .css(), either works.

Answer 2

At least in WebKit, you can do quite a lot with video and animation:

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

:o