Foros del Web - Ver Mensaje Individual - Youtube

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>