Foros del Web » Programando para Internet » Javascript »

Youtube - Hacer Play on Over

Estas en el tema de Youtube - Hacer Play on Over en el foro de Javascript en Foros del Web. Hola a todos. Por especificación del cliente, necesito una funcionalidad que no se porqué, no me está funcionando. En mi web hay una imagen, que ...
  #1 (permalink)  
Antiguo 28/08/2013, 12:56
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 8 meses
Puntos: 10
Youtube - Hacer Play on Over

Hola a todos.

Por especificación del cliente, necesito una funcionalidad que no se porqué, no me está funcionando.


En mi web hay una imagen, que al hacer over, tiene que quitarse (mantenerse unos textos por encima) y cargar un vídeo de youtube.

Conceptos:

- Over de la imagen
---- Se va el texto con fadeout
-------- Aparece el vídeo con FadeIn
-------- Hace Play


Out de la imagen
---- Hace Pause el video
---- Se va el video de youtube con fadeout
-------- Aparece el texto que había con fadein


Lo tengo programado, pero los FADE sobre el vídeo no funcionan, carga DE GOLPE el vídeo y desaparece DE GOLPE el vídeo.


¿alguien que sepa?

Aquí mi desarrollo: http://www.javiscript.es/desarrollo/yppah/


Gracias y un saludo.


Javier

Última edición por el_javi; 29/08/2013 a las 00:49
  #2 (permalink)  
Antiguo 02/09/2013, 08:55
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 14 años, 10 meses
Puntos: 45
Respuesta: Youtube - Hacer Play on Over

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

google plus
  #3 (permalink)  
Antiguo 02/09/2013, 09:31
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 8 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. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4. <meta name="Language" content="Spanish">
  5.  
  6.  
  7. <script type="text/javascript">
  8. /*<![CDATA[*/
  9.  
  10. var g;
  11. var r;
  12.  
  13. window.onload = function()
  14. {
  15.    g = document.getElementById('gallo');
  16.    r = document.getElementById('relleno');
  17.    g.loop = true;
  18.    r.onmouseover = function() { r.style.opacity= 0; g.play(); };
  19.    r.onmouseout = function()  { g.pause(); r.style.opacity=0.4; };
  20. };
  21.    
  22. /*]]>*/
  23.  
  24. <style type="text/css">
  25.  
  26. body { background-color: white;}
  27.  
  28. #marco
  29. {
  30.         position: absolute;
  31.         right: 50%;
  32. }
  33.  
  34. #gallo
  35. {
  36.         position: relative;
  37.         right: -50%;
  38.         z-index: 1;
  39. }
  40. #relleno
  41. {
  42.         position: absolute;
  43.         top: 0px;
  44.         right: -50%;
  45.         z-index: 2;
  46.         width: 100%;
  47.         height: 100%;
  48.         background-color: white;
  49.         opacity: 0.2;
  50. }
  51.  
  52. #web
  53. {
  54.         position: absolute;
  55.         width: 100%;
  56.         height: 2em;
  57.         line-height: 2em;
  58.         text-indent: 2em;
  59.         bottom: 0;
  60.         left: 0%;
  61.         z-index: 3;
  62.         background-color: white;
  63. }
  64.  
  65.  
  66. <title>Prueba video</title>
  67.  
  68. </head>
  69.  
  70.         <div id="marco">
  71.     <video id="gallo" src="gallo.mp4" type="video/mp4"></video>
  72.     <div id="relleno"></div>
  73.         </div>
  74.         <a id="web"href="http://www.tecnawebs.es">Tecnawebs - Desarrollo web y modelado 3D</a>
  75. </body>
  76. </html>
  #4 (permalink)  
Antiguo 02/09/2013, 10:17
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 14 años, 10 meses
Puntos: 45
Respuesta: Youtube - Hacer Play on Over

Buenas,

tienes razón en FF a mi tampoco me funciona. Yo sólo lo había probado en Chrome y no he mirado nada de compatibilidad con otros navegadores. Suele haber problemas con algunas etiquetas HTML5 y también con los formatos y codec de video. Era sólo una prueba rápida. Pero quizá la idea de sobreponer una capa y aplicar ahí la opacidad te sirva. Te he puesto una captura de como se ve en esta página.. Pruébalo en Chrome a mi si que me funciona.
__________________
tecnawebs.es Diseño web y programación - Modelado 3D.

google plus
  #5 (permalink)  
Antiguo 02/09/2013, 10:41
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 8 meses
Puntos: 10
Respuesta: Youtube - Hacer Play on Over

Hola compy.

Muchas gracias por el ejemplo.

si que funciona (a mi me funciona)

Pero el problema me viene siendo vídeo de YOUTUBE...

¿Podrías hacerme un pequeño ejemplo con un vídeo de youtube?

Saludos.
  #6 (permalink)  
Antiguo 02/09/2013, 12:27
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 14 años, 10 meses
Puntos: 45
Respuesta: Youtube - Hacer Play on Over

Buenas,

se puede igual hacer con un video alojado en youtube copiando el contenido de la etiqueta video que se genera en el iframe del código que te facilitan para insertar. En el caso del ejemplo sería cambiar la etiqueta video por:

Código HTML:
Ver original
  1. <video id="gallo" class="video-stream html5-main-video" x-webkit-airplay="allow" data-youtube-id="5ukRzvCNTeo" src="http://r19---sn-h5q7dn7k.c.youtube.com/videoplayback?ms=au&ipbits=8&ratebypass=yes&expire=1378169182&source=youtube&sparams=cp%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&ip=213.97.96.43&fexp=936102%2C924606%2C929117%2C929121%2C929906%2C929907%2C929922%2C929127%2C929129%2C929131%2C929930%2C936403%2C925726%2C925720%2C925722%2C925718%2C929917%2C906945%2C929933%2C920302%2C913428%2C920605%2C919811%2C913563%2C904830%2C919373%2C930803%2C908536%2C904122%2C938701%2C936308%2C909549%2C900816%2C912711%2C904494%2C904497%2C900375%2C934507%2C936312%2C906001&itag=43&key=yt1&cp=U0hWTVFRV19NTENONl9JS0FCOjlFOGVSWTByeVRl&id=e6e911cef08d4dea&mt=1378145357&sver=3&mv=m&upn=PUFx3vy3okc&cpn=MsK8GOyaZ8ShuIb0&signature=BC797E5ECA5D5F5F476A2B3BC8845701BE45CDC0.D17BAF89BC54791A18A60D2D63B01C80E6AF60E6&ptk=youtube_none&pltype=contentugc" style="width: 420px; transform: none;"></video>

Otra opción es habilitando la API para usar javascript pero eso es más complicado.
__________________
tecnawebs.es Diseño web y programación - Modelado 3D.

google plus
  #7 (permalink)  
Antiguo 02/09/2013, 12:32
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 8 meses
Puntos: 10
Respuesta: Youtube - Hacer Play on Over

Acabo de probar tu ejemplo y no me funciona con el video de youtube

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" lang="es" xml:lang="es">
<
head>
<
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()
{
    
document.getElementById('gallo');
    
document.getElementById('relleno');
    
g.loop true;
    
r.onmouseover = function() { r.style.opacity0g.play(); };
    
r.onmouseout = function()  { g.pause(); r.style.opacity=0.4; };
};
    
 
/*]]>*/
</script>
 
<style type="text/css">
 
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;
}
 
</style>
 
<title>Prueba video</title>
 
</head>
 
<body>
    <div id="marco">
        <video id="gallo" class="video-stream html5-main-video" x-webkit-airplay="allow" data-youtube-id="5ukRzvCNTeo" src="http://r19---sn-h5q7dn7k.c.youtube.com/videoplayback?ms=au&ipbits=8&ratebypass=yes&expire=1378169182&source=youtube&sparams=cp%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&ip=213.97.96.43&fexp=936102%2C924606%2C929117%2C929121%2C929906%2C929907%2C929922%2C929127%2C929129%2C929131%2C929930%2C936403%2C925726%2C925720%2C925722%2C925718%2C929917%2C906945%2C929933%2C920302%2C913428%2C920605%2C919811%2C913563%2C904830%2C919373%2C930803%2C908536%2C904122%2C938701%2C936308%2C909549%2C900816%2C912711%2C904494%2C904497%2C900375%2C934507%2C936312%2C906001&itag=43&key=yt1&cp=U0hWTVFRV19NTENONl9JS0FCOjlFOGVSWTByeVRl&id=e6e911cef08d4dea&mt=1378145357&sver=3&mv=m&upn=PUFx3vy3okc&cpn=MsK8GOyaZ8ShuIb0&signature=BC797E5ECA5D5F5F476A2B3BC8845701BE45CDC0.D17BAF89BC54791A18A60D2D63B01C80E6AF60E6&ptk=youtube_none&pltype=contentugc" style="width: 420px; transform: none;"></video>
        <div id="relleno"></div>
    </div>

</body>
</html> 
¿Porqué podría ser?

Gracias compy por el trabajo que estás realizando.

Saludos.

Javier
  #8 (permalink)  
Antiguo 02/09/2013, 12:52
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 14 años, 10 meses
Puntos: 45
Respuesta: Youtube - Hacer Play on Over

Buenas,

prueba generando tu propio código a partir del que te da en el iframe. Con esa versión del video también me funciona en FF y Opera.
__________________
tecnawebs.es Diseño web y programación - Modelado 3D.

google plus
  #9 (permalink)  
Antiguo 02/09/2013, 12:58
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 8 meses
Puntos: 10
Respuesta: Youtube - Hacer Play on Over

¿Desde dónde generas ese código tan largo que has puesto?
Desconozco desde donde se crea el código, porque en youtube no lo he visto.

Saludos.
  #10 (permalink)  
Antiguo 07/09/2013, 03:59
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 14 años, 10 meses
Puntos: 45
Respuesta: Youtube - Hacer Play on Over

Buenas,

te he hecho un pequeño ejemplo usando el API de Youtube con el evento over y con el evento click pero no funciona bien en todos los navegadores, por ejemplo en Opera y en algunos móviles, sobre todo el evento over para pantallas táctiles no es nada recomendable porque aunque funcionara tendrían que estar con el dedo en la pantalla para reproducir el video y no es cómodo. De la opacidad no he puesto nada porque es sencillo añadirlo. Puedes verlo funcionando aqui


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. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4. <meta name="Language" content="Spanish">
  5.  
  6. <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
  7.  
  8. <title>Prueba video</title>
  9.  
  10. <script type="text/javascript">
  11. /*<![CDATA[*/
  12.  
  13. // Gallo, jirafa
  14. var videoids = [ '5ukRzvCNTeo', 'eH7_icxSqKk' ];
  15. var actual = 0;
  16. var player;
  17.  
  18. function onYouTubeIframeAPIReady()
  19. {
  20.    player = new YT.Player('video', {
  21.    height: '315',
  22.    width: '420',
  23.     videoId: videoids[0],
  24.     playerVars: { 'controls' : 0, 'loop': 1 },
  25.     events: {
  26.          'onReady': onPlayerReady,
  27.           'onStateChange': onPlayerStateChange
  28.          }
  29.     });
  30.  
  31.    var video = document.getElementById("video");
  32.    video.onmouseover = videomouseover;
  33.    video.onmouseout = videomouseout;
  34.  
  35.    var prueba = document.getElementById("prueba");
  36.    prueba.onclick = function(event)
  37.    {
  38.        player.pauseVideo();
  39.        event.preventDefault();
  40.        return false;
  41.    };
  42. }
  43.  
  44. function videomouseout(event) { player.pauseVideo(); }
  45. function videomouseover(event) { player.playVideo(); }
  46.  
  47.  
  48. function onPlayerStateChange(event)
  49. {
  50.    if (event.data == YT.PlayerState.ENDED)
  51.    {
  52.       ++actual;
  53.       if (actual >= videoids.length)
  54.           actual = 0;
  55.       player.loadVideoById(videoids[actual]);
  56.    }
  57. }
  58.  
  59. function onPlayerReady(event)
  60. {
  61.     player.playVideo();
  62. }
  63.  
  64.    
  65. /*]]>*/
  66.  
  67. </head>
  68.  
  69.                        
  70.     <iframe id="video" width="420" height="315" src="//www.youtube.com/embed/5ukRzvCNTeo?rel=0?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
  71.  
  72.     <p><a id="prueba" href="#">Parar</a></p>
  73.  
  74.     <a id="web"href="http://www.tecnawebs.es">Tecnawebs - Desarrollo web y modelado 3D</a>
  75. </body>
  76. </html>
__________________
tecnawebs.es Diseño web y programación - Modelado 3D.

google plus

Etiquetas: fade, funcion, mouse, play, video, youtube
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:37.