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
miércoles, 27 de julio de 2016
jueves, 21 de enero de 2016
Windows 10 + apache 2.4 y php 5.5
Actualmente Apache httpd se tiene que descargar de páginas alternativas donde lo han compilado.
Instalando apache
Descargue desde: http://www.apachehaus.com/cgi-bin/download.plx
Descomprima en su pc, en mi caso renombro la carpeta para que sea mas fácil:
E:/servidor/Apache24
Edite el archivo Apache24/conf/httpd.conf con los valores de la ruta de la carpeta donde se localiza apache
Define SRVROOT "E:/server/Apache24"
DocumentRoot "E:/server/www"
<Directory "E:/server/www">
guarde e inicie desde una consola y ejecute el archivo
Apache24/bin/httpd
Inicie su explorador y escriba en la barra de dirección
localhost
El empaquetado viene con una guía para mayor información.
(httpd-2.4.18-x64-vc11/readme_first.html)
Instalando PHP5
Intente descargar varias versiones de php pero la única que tiene la librería php5papache2_4.dll es la
php-5.5.5-Win32-VC11-x64.zip
Descargue php 5 desde http://windows.php.net/downloads/releases/archives/
Descomprima y coloque en una ubicación adecuada
E:/servidor/php
Duplique el archivo php.ini-production como php.ini
Edite el archivo httpd.conf de apache para configurar su uso con php
Agrege y edite las siguientes líneas
LoadModule php5_module "E:/server/php/php5apache2_4.dll"
DirectoryIndex index.php index.html
AddType application/x-httpd-php .php
Guarde y reinicie apache
verifique en httpd://localhost con un archivo que tenga código php
Ejecutando Apache como servicio
Para agregar apache como un servicio de windows y se ejecute desde el inicio, ejecute el siguiente comando desde la consola:
httpd.exe -k install -n "Apache24"
Ahora puede verificar en el administrador de servicios que Apache24 ha sido agregado.
Es todo, espero agregar el uso de mysql próximamente.
Saludos =)
Suscribirse a:
Entradas (Atom)