懸停閃回回退動畫

我想在mouseenter/mouseover上的mediaeelementplayer中設置閃回回退的動畫。我設置這樣的視頻大小：懸停閃回回退動畫

$('video').mediaelementplayer({ 
    plugins: ['flash', 'silverlight'], 
    features: ['playpause', 'progress'], 
    autoplay: true, 
    success: function (mediaElement, domObject, player) { 
    if (mediaElement.pluginType == 'flash') { 
     mediaElement.addEventListener('canplay', function() { 
      mediaElement.play(); 
      mediaElement.setVideoSize(200, 115); 
      player.setMuted(true); 
     }, false); 
    }

而我想動畫的寬度爲500和250的高度。我不知道如何動畫。它只是IE7/8中的一個問題，因爲那些是不支持我的HTML5視頻的唯一瀏覽器，但它們具有動畫效果，我需要它看起來像Chrome，Firefox，Safari等一樣。是否有EventLsitener可用於那？

來源

2014-01-06 user2958098

因此，當光標懸停在視頻上時，您想要懸停縮放效果嗎？ – franzlorenzon

是的，我已經在支持HTML5視頻的瀏覽器上工作，但IE7/IE8不支持它，因此它回落到flashmediaelement.swf，我無法弄清楚如何讓它像其他瀏覽器一樣動畫化。現在，我正在設置視頻大小，但是當我將鼠標懸停在視頻上時，它的大小保持不變，我希望它以200x115開始，然後當您將鼠標懸停在視頻上時，它可以緩解至500x250 – user2958098

您可以使用'mouseover'例。順便說一下，'addEventListener'在IE7-8上工作嗎？我認爲用於在這些瀏覽器上綁定事件的方法是'attachEvent'。 – franzlorenzon

你可以寫幾行內容：

$('video').on('hover', function() { 
    $(this)[0].setVideoSize(500, 250) 
}, function() { 
    $(this)[0].setVideoSize(200, 115) 
});

或者如果你喜歡：

$('video').mouseenter(function() { 
    $(this)[0].setVideoSize(500, 250) 
}).mouseleave(function() { 
    $(this)[0].setVideoSize(200, 115) 
});

一個超時：

$('video').on("mouseenter", function() { 
    clearTimeout($(this).data("close_timeout")); 
    $(this)[0].setVideoSize(500, 250); 
}).on("mouseleave", function() { 
    $(this).data("close_timeout", setTimeout(function() { 
     $(this)[0].setVideoSize(200, 115); 
    }, 200)); 
});

然而

，我覺得有些清潔的解決方案可以使用...看看這裏：How to Make MediaElement.js Fluid?。

來源

2014-01-09 09:34:00 franzlorenzon

這有效，但速度太快。有沒有辦法讓它變慢？ – user2958098

$（'。mejs-inner'）。mouseenter（function（）{ mediaElement.setVideoSize（500，250） }）; – user2958098

你想要某種動畫？我會研究這些天的更好的解決方案 – franzlorenzon

懸停閃回回退動畫

回答

相關問題