JQuery: анимация HTML5 видео элемента?

Question

возможно ли анимировать элемент видео 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>

Кажется, это не работает!

Answer 1

left не будет иметь смысла, если только он не имеет позиции, отличной от static ( по умолчанию ). Сначала дайте ему атрибут position: relative css, например:

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

Вы можете увидеть быстрое демо здесь

В качестве альтернативы, а еще лучше, укажите <div>, <video>, что бы вы ни хотели анимировать, этот атрибут в таблице стилей (либо через идентификатор, либо через класс), например:

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

Во втором подходе вы добавите class="relative" к элементу, который вы анимируете. При таком подходе ваш текущий код работает, поэтому выберите метод, таблицу стилей или .css(), либо работает.

Answer 2

По крайней мере, в WebKit вы можете многое сделать с видео и анимацией:

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

: о