/ / Flash Fallback Animate ao passar o mouse - javascript, jquery, html5, mediaelement.js, mediaelement

Flash Fallback Animate no Hover - javascript, jquery, html5, mediaelement.js, mediaelement

Estou tentando animar o fallback do flash no mediaeelementplayer no mouseenter / mouseover. Defino o tamanho do vídeo assim:

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

E eu quero animar para uma largura de 500 e umaaltura de 250. Não sei como animar. É apenas um problema no IE7 / 8, porque esses são os únicos navegadores que não suportam meu vídeo HTML5, mas são animados e preciso que pareça o Chrome, Firefox, Safari, etc ... Existe um EventLsitener que posso usar naquela?

Respostas:

1 para resposta № 1

Você pode escrever algo ao longo destas linhas:

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

Ou se você preferir:

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

Com um tempo limite:

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

no entanto, acho que alguma solução mais limpa poderia ser usada ... dê uma olhada aqui: Como tornar o MediaElement.js fluido?.