Hola a todos
En ocasiones tenemos una serie de videos de youtube embebidos mediante iframes en una misma página, que bien pueden estar ocultos o en tabs. Pero cuando le damos play a uno y después pasamos a otro tab o boton, este no se detiene.
Para lograr pausar un video al dar clic en un boton usaremos javascript y un truco que encontre hace días en stackoverflow (el cual está desactualizado, 2012).
Librerías que necesitamos:
<script src="js/jquery.js"></script>
Insertamos el siguiente código en el <head>
<script>
<!--
$(function() {
//NOTE: in url is necessary add ?enablejsapi=1
function playVideoAndPauseOthers(frame) {
$('iframe[src*="https://www.youtube.com/embed/"]').each(function(i) {
var func = this === frame ? 'playVideo' : 'pauseVideo';
this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
});
}
$('div a[title^="video"]').click(function() {
var frameId = /video(\d+)/.exec($(this).attr('title'));
//alert(frameId);
if (frameId !== null) {
frameId = frameId[1]; // Get frameId
playVideoAndPauseOthers($('#video' + frameId + ' iframe')[0]);
}
});
});
-->
</script>
y nuestros html debe esta de la siguiente manera:
<div id="video1">
<iframe name="video1" width="600" height="315" src="https://www.youtube.com/watch?v=uYbsSj6t0V4?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
<div id="video2">
<iframe name="video2" width="600" height="315" src="https://www.youtube.com/watch?v=sEe1ZGhYSWs?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
<div><a href="#" title="video1">Opción A</a></div>
<div><a href="#" title="video2">Opción B</a></div>
Tomen en nota y es muy importante, después de la url de cada video hay que agregar
?enablejsapi=1 lo cual indica que se utilizará la API de Youtube
Es todo, cuando le de clic al botón A se iniciará el video1, al dar clic al boton b, se dentendrá el video1 y se iniciará el video2, y viceversa.
El código se puede cambiar y dejar de hacer referencia al atributo title del div y usar un data- , pero eso lo dejo de tarea.
Saludos
Mostrando las entradas con la etiqueta video. Mostrar todas las entradas
Mostrando las entradas con la etiqueta video. Mostrar todas las entradas
miércoles, 27 de julio de 2016
Suscribirse a:
Entradas (Atom)