youtube iframe api loadVideoById() error

Estoy agregando el video de youtube al sitio web de una empresa y me gustaría que se muestre en dispositivos que no sean Flash. He estado jugando con la API iframe de youtube y actualicé uno de sus ejemplos para permitir que un usuario haga clic en un enlace para cambiar el video en el iframe. El código editado es:youtube iframe api loadVideoById() error

<!DOCTYPE HTML> 
<html> 
<body> 
<div id="player"></div> 
<script> 
var tag = document.createElement('script'); 
tag.src = "http://www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
var done = false; 
var player; 
function onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: 'JW5meKfy3fY', 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
} 
function onPlayerReady(evt) { 
    evt.target.playVideo(); 
} 
function onPlayerStateChange(evt) { 
    if (evt.data == YT.PlayerState.PLAYING && !done) { 
     setTimeout(stopVideo, 6000); 
     done = true; 
    } 
} 
function stopVideo() { 
    player.stopVideo(); 
} 

function loadVideo(videoID) { 
    if(player) { player.loadVideoById(videoID); } 
} 

</script> 

<a href="javascript:loadVideo('kGIjetX6TBk');">Click me to change video</a> 

</body> 
</html>

La única cosa que fue añadido:

function loadVideo(videoID) { 
    if(player) { player.loadVideoById(videoID); } 
}

Esto funciona bien en Safari, Chrome y Firefox, pero no funciona en Internet Explorer 7, 8 o 9. En Internet Explorer 7 y 8 devuelve un error "El objeto no admite esta propiedad o método".

¿Es esto un problema con la API o estoy haciendo algo mal?

Fuente

2012-03-20 pheedsta

Tuve un problema similar, y resultó que no deberías llamar a ninguno de los métodos en el objeto YT.Player (incluido loadVideoById) siempre que no se haya llamado a onPlayerReady.

Hacer un cheque if(player) {...} no es suficiente, se creará el objeto Player y algunas propiedades ya estarán disponibles sin los métodos que necesita estar disponibles.

Fuente

2012-12-04 19:51:34 pvolders

Lo resolvió. '... events: {'onReady': function() {...}' – Xeoncross

Tendrá que llamar a la función cargar video desde el evento onPlayerReady.

Por ejemplo, si desea cargar un video al hacer clic en una miniatura de hacer esto (esto requeriría jQuery pero debe obtener el punto de):

function onPlayerReady(evt) { 

    evt.target.playVideo(); 

    //declare the click even function you want 
    $('#thumbs a).click(function(){ 

    //get a data-video-id attr from the <a data-video-id="XXXXXX"> 
    var myvideo = $(this).attr('data-video-id'); 

    //call your custom function 
    loadVideo(myvideo); 

    //prevent click propagation 
    return false; 
    }); 
}

De esta manera usted puede estar seguro de que el jugador es cargado.

Fuente

2013-03-05 15:09:38

Oye, estaba enfrentando el mismo problema. Estoy seguro de que se ha llamado a OnPlayerReady antes de llamar a loadVideo(). Sin embargo, no estoy llamando a loadVideo en la función onPlayerReady. Lo estoy llamando en la funciónPlayerStateChange. ¿Cual puede ser el problema? –

La prevención de la propagación de clics con return false después de la llamada al player.loadVideoById en mi controlador de eventos de clic me sirvió.

Fuente

2015-12-09 23:14:09 Ernie

youtube iframe api loadVideoById() error

Respuesta

Cuestiones relacionadas