Buenas,
no se si ya habrás resuelto el problema, juraría haber visto una continuación al mensaje mas reciente que ésta, pero por si acaso te dejo el ejemplo que he hecho.
Es un video con la etiqueta de HTML5, sin controles visibles en el que se controla la reproducción y la opacidad mediante el evento onmouseover. Efectivamente la opacidad responde mal sobre la etiqueta video pero lo que he hecho es sobreponer una capa y aplicar a ésta la opacidad. Es un ejemplo sencillo y no he aplicado efecto fade pero se podría hacer sin problemas. Te dejo el código aquí pero puedes verlo funcionando en
este ejemplo
Código HTML:
Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="Language" content="Spanish">
<script type="text/javascript"> /*<![CDATA[*/
var g;
var r;
window.onload = function()
{
g = document.getElementById('gallo');
r = document.getElementById('relleno');
g.loop = true;
r.onmouseover = function() { r.style.opacity= 0; g.play(); };
r.onmouseout = function() { g.pause(); r.style.opacity=0.4; };
};
/*]]>*/
body { background-color: white;}
#marco
{
position: absolute;
right: 50%;
}
#gallo
{
position: relative;
right: -50%;
z-index: 1;
}
#relleno
{
position: absolute;
top: 0px;
right: -50%;
z-index: 2;
width: 100%;
height: 100%;
background-color: white;
opacity: 0.2;
}
#web
{
position: absolute;
width: 100%;
height: 2em;
line-height: 2em;
text-indent: 2em;
bottom: 0;
left: 0%;
z-index: 3;
background-color: white;
}
<video id="gallo" src="gallo.mp4" type="video/mp4"></video> <a id="web"href="http://www.tecnawebs.es">Tecnawebs - Desarrollo web y modelado 3D
</a>