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));
});

然而，我认为可以使用一些更清洁的解决方案...看看这里：How to Make MediaElement.js Fluid?。

悬停时Flash后备动画

1 个答案: