0

I am trying to animate the flash fallback in mediaeelementplayer on mouseenter/mouseover. I set the video size like this:

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

And I want it to animate to a width of 500 and a height of 250. I am not sure how to animate. Its only a problem in IE7/8 because those are the only browsers that dont support my HTML5 video but they animate and I need it to look the same as Chrome, Firefox, Safari, etc...Is there an EventLsitener I can use for that?

user2958098
  • 51
  • 2
  • 9
  • So you want an hover scaling effect when you hover the cursor over the video? – franzlorenzon Jan 08 '14 at 09:21
  • yes, I have it working in browsers that support HTML5 Video, but IE7/IE8 do not support it so it falls back to the flashmediaelement.swf and I can not figure out how to get it to animate like the other browsers. Right now I am setting the video size but that is making it stay the same size when I hover over the video and I want it to start at 200x115 then when you hover over the video it eases to 500x250 – user2958098 Jan 08 '14 at 16:04
  • You could use `mouseover` for example. By the way, does `addEventListener` work on IE7-8? I think that the method used to bind events on those browsers is `attachEvent`. – franzlorenzon Jan 08 '14 at 21:02
  • addEventListener does work in IE7/8. I tried attachEvent and it didn't work properly. How would I integrate the mouseover? I have mouseenter for the rest of the browsers and it works great. – user2958098 Jan 08 '14 at 21:25
  • That's strange (http://stackoverflow.com/questions/6927637/addeventlistener-in-internet-explorer) Anyway, `mouseenter` is fine for IE browsers, the only drawback is that it doesn't work on Safari and on older versions of some browsers (Firefox <10 and Chrome <30). – franzlorenzon Jan 08 '14 at 21:41
  • How would I write the mouseover code for the flash element? I cant figure that out and I cant find anything on that. – user2958098 Jan 08 '14 at 21:52

1 Answers1

1

You could write something along these lines:

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

Or if you prefer:

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

With a timeout:

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

however, I think that some cleaner solution could be used... have a look here: How to Make MediaElement.js Fluid?.

Community
  • 1
  • 1
franzlorenzon
  • 5,845
  • 6
  • 36
  • 58