Reproducir un vídeo con jQuery ubicado dentro de un iFrame

Question

tengo un iFrame en un conjunto de páginas de display: none:

<div id="the-stage" style="display:none;"> 
<iframe src="index.html" scrolling="no"> 
</iframe> 
</div><!--end the-stage--> 

que tiene una etiqueta <video> dentro de ella:

<video id="video1" width="345" height="264" controls poster="poster.jpg"> 
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
<source src="video.webm" type='video/webm; codecs="vp8, vorbis"'> 
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'> 
</video> 

En la página que tiene la etiqueta , trato de reproducir el vídeo cuando se revela el div oculto:

jQuery("a.launch").click(function(){ 
jQuery("#the-stage").fadeIn(); 
jQuery("#video1").get(0).play(); 
return false; 
}); 

consigo el error siguiente en la consola:

"no se puede llamar al método de juego indefinido"

¿Alguna idea? Gracias.

Answer 1

Es necesario utilizar contents() para obtener el contenido anidado y luego encontrar el elemento video. También debe asegurarse de hacer esto después de que el div esté visible, es decir, cuando se complete el desvanecimiento. La razón es cuando el div que contiene iframe está oculto, el video no se reproducirá.

jQuery("a.launch").click(function(){ 
    jQuery("#the-stage").fadeIn(function(){ 
     jQuery("#the-stage").find("iframe").contents().find("#video1").get(0).play(); 
    }); 
    return false; 
}); 

Answer 2

Debe acceder al document del iframe con contents().

jQuery('#the-stage').contents().find('#video1').get(0).play();