Tema: Youtube - Hacer Play on Over
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 02/09/2013, 09:31
Avatar de el_javi
el_javi
 
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 7 meses
Puntos: 10
Respuesta: Youtube - Hacer Play on Over
Hola Tecna

Efectivamente, he respondido antes, preguntando alguna ayuda, pero .. por tercera vez, me eliminan mis mensajes, no se porque....

Gracias por tu ejemplo.

La verdad, que no me funciona, lo he probado en IE, FF y no funciona. Solo veo el enlace a Tecnawebs - Desarrollo web y modelado 3D.

¿Porqué no funciona? ¿Algún bug?

Voy a descargar el código que has presentado y a probarlo en local.

saludos y gracias!!

Javier

Cita:
Iniciado por Tecna Ver Mensaje
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
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html lang="es">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5. <meta name="Language" content="Spanish">
  6.  
  7.  
  8. <script type="text/javascript">
  9. /*<![CDATA[*/
  10.  
  11. var g;
  12. var r;
  13.  
  14. window.onload = function()
  15. {
  16.     g = document.getElementById('gallo');
  17.     r = document.getElementById('relleno');
  18.     g.loop = true;
  19.     r.onmouseover = function() { r.style.opacity= 0; g.play(); };
  20.     r.onmouseout = function()  { g.pause(); r.style.opacity=0.4; };
  21. };
  22.     
  23.  /*]]>*/
  24. </script>
  25.  
  26. <style type="text/css">
  27.  
  28. body { background-color: white;}
  29.  
  30. #marco
  31. {
  32.         position: absolute;
  33.         right: 50%;
  34. }
  35.  
  36. #gallo
  37. {
  38.         position: relative;
  39.         right: -50%;
  40.         z-index: 1;
  41. }
  42. #relleno
  43. {
  44.         position: absolute;
  45.         top: 0px;
  46.         right: -50%;
  47.         z-index: 2;
  48.         width: 100%;
  49.         height: 100%;
  50.         background-color: white;
  51.         opacity: 0.2;
  52. }
  53.  
  54. #web
  55. {
  56.         position: absolute;
  57.         width: 100%;
  58.         height: 2em;
  59.         line-height: 2em;
  60.         text-indent: 2em;
  61.         bottom: 0;
  62.         left: 0%;
  63.         z-index: 3;
  64.         background-color: white;
  65. }
  66.  
  67. </style>
  68.  
  69. <title>Prueba video</title>
  70.  
  71. </head>
  72.  
  73. <body>
  74.         <div id="marco">
  75.     <video id="gallo" src="gallo.mp4" type="video/mp4"></video>
  76.     <div id="relleno"></div>
  77.         </div>
  78.         <a id="web"href="http://www.tecnawebs.es">Tecnawebs - Desarrollo web y modelado 3D</a>
  79. </body>
  80. </html>