Detener video html5 cargado con iframe

[ceaped]

Buenas tardes

Cargo en mi index un video así:

<iframe src="video_01.html" scrolling="no" frameborder="0"></iframe>

¿Cómo hago para detener el video desde mi index?

Gracias por su ayuda

[PHPeros]

No se necesita jQuery, obtienes el window del iframe mediante su propiedad contentWindow (o directamente con contentDocument), luego obtienes el video por su ID y le aplicas el método stop().

[ceaped]

Hola PHPeros
Mira lo que hago:

1. En index cargo

Código HTML:

<iframe id="audio_1" src="video_01.html" scrolling="no" frameborder="0"></iframe>
 

En el head pongo

Código Javascript:

<script>
function myFunction() {
    var x = document.getElementById("audio_1");
    var y = (x.contentWindow || x.contentDocument);
    if (y.document)y = y.document;
    y.body.sound.pause();
}
</script>
 

El archivo "video_01.html" cago así el video:

Código HTML:

<div id="div_1">    
    <video controls width="470" height="339" preload="auto" poster="../images/videos_home.jpg">
    <source src="videos/introduccion.ogv" type='video/ogg; codecs="theora, vorbis"' />
    <source src="videos/introduccion.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="videos/introduccion.webm" type='video/webm; codecs="vp8, vorbis"' />
        
    <object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=videos/introduccion.mp4">
    <param name="movie" value="player.swf?file=videos/introduccion.mp4" />
    </object>
    </video>    
    </div>
 

¿Qué debo agregar para detener el sonido?

Gracias por tu ayuda

[PHPeros]

En qué quedamos: ¿pausar el vídeo o quitar el sonido?

Código Javascript:

<script>
function myFunction() {
    var x = document.getElementById("audio_1");
    var y = x.contentWindow;
    y.document.getElementById("el_video").pause();
    // quitar sonido: y.document.getElementById("el_video").muted = true;
}
</script>
 

Y asegúrate de ponerle el ID al <video>.

[ceaped]

Hola PHPeros, que pena molestar tanto pero es que no me da.
Te pongo lo que hice:

Código HTML:

<iframe id="audio_1" src="video_01.html" scrolling="no" frameborder="0"></iframe>
 

En el head:

Código Javascript:

<script>
function myFunction() {
    var x = document.getElementById("audio_1");
    var y = x.contentWindow;
    y.document.getElementById("el_video").pause();
    // quitar sonido: y.document.getElementById("el_video").muted = true;
}
</script>
 

El archivo "video_01.html":

Código HTML:

<div id="div_1">    
    <video id="el_video" controls width="470" height="339" preload="auto" poster="../images/videos_home.jpg">
    <source src="videos/introduccion.ogv" type='video/ogg; codecs="theora, vorbis"' />
    <source src="videos/introduccion.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="videos/introduccion.webm" type='video/webm; codecs="vp8, vorbis"' />
        
    <object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=videos/introduccion.mp4">
    <param name="movie" value="player.swf?file=videos/introduccion.mp4" />
    </object>
    </video>    
    </div>
 

Nuevamente me disculpas y gracias por tu ayuda

[ceaped]

Hola holaaa PHPeros...si ya me dio.
Esta bien tu código yo estaba haciendo algo mal...;)

*Te hago otra pregunta relaciona con el tema:

Oculto una div de un iframe asi:

Código Javascript:

$(document).ready(function () {
    $('iframe').load(function () {
    $(this).contents().find(".banner_adicional_restaurantes").css({'display':'none'});
    });
    });
 

Pero no me funciona en Chrome.

¿Cómo hago para que me funcione también en Chrome?
¿O cómo hago para ocultar una div de un iframe desde el index?

Gracias por tu ayuda


*Nota: ya había preguntado en el foro pero no me dio...;)

[PHPeros]

Me alegro

Es raro que no te funcione. ¿Te brinda algún error la consola?

[ceaped]

No ubicaba mal el código en el head (el botón que de detenía el video)...;)

PHPeros, viste que te hice 2 pregunticas más.
Me ayudas por favor, gracias y mucha suerte

[PHPeros]

Si te funcionó algo muy parecido sin librería no entiendo por qué no te funciona con librería.

Iniciado por YO

Es raro que no te funcione. ¿Te brinda algún error la consola?

Esa pregunta iba vinculada a tu nueva pregunta.

[ceaped]

Hola PHPeros
Te hago otra pregunta:

¿Cómo hago para quitarle setInterval a este jQuery?:

Código Javascript:

var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
    setInterval(function(){
    curHeight = $frame.contents().find('body').height();
    if ( curHeight != lastHeight ) {
    $frame.css('height', (lastHeight = curHeight) + 'px' );
    }
    },500);
 

Necesito que para el iframe sea un auto, este código lo hace pero me detiene unos segundos.

Gracias por tu ayuda

[PHPeros]

Muy sencillo:

Código Javascript:

var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)'),
    curHeight = $frame.contents().find('body').height();
    if ( curHeight != lastHeight ) {
        $frame.css('height', (lastHeight = curHeight) + 'px' );
    }
 

[ceaped]

Hola PHPeros
Mira te pongo exactamente en donde lo utilizo

Código Javascript:

<script type="text/javascript">
    jQuery(document).ready(function() {
    
    jQuery('.bloque_activador').click(function() {
    jQuery('.bloque_activador').removeClass('on');
    jQuery('.accordionContent').slideUp('normal');   
    if(jQuery(this).next().is(':hidden') == true) {     
    jQuery(this).addClass('on');              
    jQuery(this).next().slideDown('normal');
    }
    
    //Alto auto del iframe
    var lastHeight = 0, curHeight = 0, jQueryframe = jQuery('iframe'),
    curHeight = jQueryframe.contents().find('body').height();
    if ( curHeight != lastHeight ) {
        jQueryframe.css('height', (lastHeight = curHeight) + 'px' );
    }
    //Fin Alto auto del iframe
          
     });
    
    jQuery('.accordionContent').mouseover(function() {
    jQuery(this).addClass('over');      
    }).mouseout(function() {
    jQuery(this).removeClass('over');                                       
    }); 
    jQuery('.accordionContent').hide();
    
 
});
</script>
 

Código HTML:

<h2 class="bloque_activador">Texto...</h2>
<div class="accordionContent" >
<iframe src="pagina_01.html" scrolling="no" frameborder="0"></iframe>
</div>
 
<h2 class="bloque_activador">Texto...</h2>
<div class="accordionContent" >
<iframe src="pagina_02.html" scrolling="no" frameborder="0"></iframe>
</div>
 

pagina_01.html y pagina_02.html tienen un alto distinto.
Me funciona pero si presiono primero pagina_01.html si presiono primero pagina_02.html NO

Gracias por toda tu ayuda

[ceaped]

;(
Me pueden ayudar....