Question

我试图让我的视频以其原始大小的40％开始，一旦你将鼠标悬停在它上面，它就会动画到100％。 div的原始大小是760x520像素，我需要它以300x250像素开始。 Heres是HTML：

      <div id="background"> 
         <img src="image/background.jpg" width="760" height="520" style="width:760px;height:520px;position:absolute; top:9px; left:9px;">
         <img src="image/videoPanel02.png" style="width:643px; height:366px;position:absolute;top:62px;left:68px;z-index:inherit;">
         <img src="image/top_bar2.png" style="width:760px;height:60px;position:absolute;top:9px;left:9px;z-index:inherit;">
         <img src="image/bottomMenu_bar.png" style="width:760px;height:45px;position:absolute;top:489px;left:9px;z-index:inherit;">
      <div class="big-player" width="500" height="250" style="width:500px;height:250px;overflow:hidden;position:absolute;top:106px;left:134px;z-index:200;">
        <video width="500" height="250" id="player2" preload="auto">
            <source type="video/mp4" src="http://localhost/HTML5/video/big_buck_bunny.mp4" />
                <object width="500" height="250" type="application/x-shockwave-flash" data="js/flashmediaelement.swf">
                    <param name="movie" value="js/flashmediaelement.swf" />
                    <param name="flashvars" value="controls=true&amp;file=http://localhost/HTML5/video/big_buck_bunny.mp4" />
               </object>
        </video>    
    </div>
    </div>

这是我到目前为止的脚本：

    var videoplayer;
    var playCount = 0;
    $('video').mediaelementplayer({
    features: ['playpause', 'progress'],
    success: function (mediaElement, domObject, player) {
        videoplayer = player;
        $('.mejs-overlay-button').hide();
        $('.mutebutton').show();
         mediaElement.play();
         player.setMuted(true);
        //show poster image once the video stops and video restarts
        mediaElement.addEventListener('ended', function () {
            $('.image-end').show(); 
            playCount++;
            if(playCount>=3){
                player.pause();
            }

        },false); //end ended function
    }//close success
});//close mediaelementplayer

$('#background').each(function(){
    $(this).width($(this).width() * 0.5);
});

$('#background').mouseover(function() {
    videoplayer.setMuted(false);
     $("#background").animate({
        width:"100%",
    }, 1500 );
});

Answer 1

检查这个FIDDLE是否给你一些线索。

$(function () {
    $("#video")
        .on('mouseenter', function () {
        $(this).animate({
            width: 500,
            height: 500
        })
    })
});

Jquery为HTML5视频制作动画

1 个答案: