懸停時Flash后備動畫

Question

我正在嘗試在mouseenter / mouseover上為mediaeelementplayer中的Flash后備動畫。 我將視頻尺寸設置為：

    $('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我可以用於那？

Answer 1

您可以按照以下方式寫一些東西：

$('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));
});

但是，我認為可以使用一些更清潔的解決方案...在這里看看： 如何使MediaElement.js流暢？ 。