Youtube - Hacer Play on Over

el_javi · #1 (**permalink**) 28/08/2013, 12:56

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

Tecna · #2 (**permalink**) 02/09/2013, 08:55

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"> 
<html 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()
{
    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; };
};
    
 /*]]>*/
</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" src="gallo.mp4" type="video/mp4"></video>
    <div id="relleno"></div>
        </div>
        <a id="web"href="http://www.tecnawebs.es">Tecnawebs - Desarrollo web y modelado 3D</a>
</body>
</html>

el_javi · #3 (**permalink**) 02/09/2013, 09:31

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

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"> 
<html 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()
{
    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; };
};
    
 /*]]>*/
</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" src="gallo.mp4" type="video/mp4"></video>
    <div id="relleno"></div>
        </div>
        <a id="web"href="http://www.tecnawebs.es">Tecnawebs - Desarrollo web y modelado 3D</a>
</body>
</html>

Tecna · #4 (**permalink**) 02/09/2013, 10:17

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.

el_javi · #5 (**permalink**) 02/09/2013, 10:41

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.

Tecna · #6 (**permalink**) 02/09/2013, 12:27

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<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.

el_javi · #7 (**permalink**) 02/09/2013, 12:32

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()
{
    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; };
};
    
 /*]]>*/
</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

Tecna · #8 (**permalink**) 02/09/2013, 12:52

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.

el_javi · #9 (**permalink**) 02/09/2013, 12:58

¿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.

Tecna · #10 (**permalink**) 07/09/2013, 03:59

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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="Language" content="Spanish">
 
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
 
<title>Prueba video</title>
 
<script type="text/javascript">
/*<![CDATA[*/
 
// Gallo, jirafa
var videoids = [ '5ukRzvCNTeo', 'eH7_icxSqKk' ];
var actual = 0;
var player;
 
function onYouTubeIframeAPIReady()
{
    player = new YT.Player('video', {
    height: '315',
    width: '420',
     videoId: videoids[0],
     playerVars: { 'controls' : 0, 'loop': 1 },
     events: {
          'onReady': onPlayerReady,
           'onStateChange': onPlayerStateChange
          }
     });
 
    var video = document.getElementById("video");
    video.onmouseover = videomouseover;
    video.onmouseout = videomouseout;
 
    var prueba = document.getElementById("prueba");
    prueba.onclick = function(event)
    {
        player.pauseVideo();
        event.preventDefault();
        return false;
    };
}
 
function videomouseout(event) { player.pauseVideo(); }
function videomouseover(event) { player.playVideo(); }
 
 
function onPlayerStateChange(event) 
{
    if (event.data == YT.PlayerState.ENDED)
    {
       ++actual;
       if (actual >= videoids.length)
           actual = 0;
       player.loadVideoById(videoids[actual]);
    }
 }
 
function onPlayerReady(event) 
{
     player.playVideo();
}
 
    
 /*]]>*/
</script>
 
</head>
 
<body>
                        
    <iframe id="video" width="420" height="315" src="//www.youtube.com/embed/5ukRzvCNTeo?rel=0?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
 
    <p><a id="prueba" href="#">Parar</a></p>
 
    <a id="web"href="http://www.tecnawebs.es">Tecnawebs - Desarrollo web y modelado 3D</a>
</body>
</html>