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（the default）之外的位置，否则无意义。首先给它一个position: relative css属性，如下所示：

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

You can see a quick demo here

或者，更好的是，在样式表中（通过ID或类）给出<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/

：○

jquery：动画html5视频元素？

2 个答案: