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 № 1Você 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?.