Email: [email protected]

Reproducción automática de video en HTML5

Con HTML5 podemos insertar un video en nuestra página de forma sencilla con el elemento <video>. Los formatos soportados son MP4, Ogg y WebM, siendo MP4 el único formato soportado en todos los navegadores modernos.

 

Existen varios atributos opcionales que se pueden definir, entre los cuales se encuentra “autoplay” para reproducir el video automáticamente.

 

Podemos añadir varias fuentes de video, el navegador tratará de reproducir el primer archivo, en caso de no estar disponible o ser un formato no soportado intentará con el siguiente y así sucesivamente.

 

Los navegadores que soportan HTML5 son Internet Explorer 9 y versiones posteriores, Firefox 3.5 en adelante, Chrome 4 en adelante y Safari 4 en adelante.

Se puede agregar un mensaje de cortesía para los usuarios que accedan desde un navegador no compatible con HTML5, dicho mensaje no sería visible en un navegador compatible.

 

Otros atributos del elemento video son:

 

controls

Muestra controles para subir/bajar el volúmen, pausar/reproducir el video, seleccionar fotograma a reproducir, cambiar a modo de pantalla completa.

 

loop

Reproducción en bucle, vuelve a iniciar el video al terminar.

 

muted

Reproduce el video en modo silencio.

 

preload

Indica al navegador si hay que precargar el video al cargar la página.

 

poster

Define una imagen de fondo mientras se espera la descarga o la reproducción del video.

 

width

Especifica el ancho del video en pixeles.

 

height

Especifica la altura del video en pixeles.

 

Así quedaría un video implementado con los atributos autoplay, muted, controls y loop:

 

 

Y este es el código: 🙂

Accediendo a elementos dentro de un iframe mediante javascript

Podemos obtener el contenido dentro de un elemento iframe mediante la propiedad contentDocument. Esta propiedad es sólo de lectura, lo cual significa que no podremos alterar el contenido de iframe, solamente podremos leerlo.

 

Suponiendo que este es el código HTML de nuestra página con un iframe:

Y este sería el contenido dentro del iframe:

 

Vamos a crear tres variables en javascript para que el código sea de fácil lectura. Declaramos la primer variable ‘iframe’ y seleccionamos el elemento iframe con el id ‘mi_iframe’ mediante la función ‘getElementById’:

 

Ahora nuestra variable ‘iframe’ puede acceder al elemento contentDocument, así que crearemos una nueva variable con el contenido del iframe:

 

Ya tenemos el contenido del iframe en nuestra variable ‘contenido’, así que podemos acceder a sus elementos, por ejemplo con ‘getElementById’:

 

Lo ponemos todo dentro de una función, en este caso de nombre ‘obtener_iframe’ y todo junto quedaría así:

 

Nota 1:

Para poder acceder a los elementos del iframe es necesario que se ejecute el código una vez que haya terminado la carga de la página, por lo tanto llamamos a la función ‘obtener_iframe’ mediante el evento ‘onload’ en la etiqueta del body.

 

 

Nota 2:

Solamente se puede acceder a un iframe cuando su atributo ‘src’ llama a una página dentro del mismo dominio.

Esto para cumplir con la política del mismo origen.

Cómo instalar WordPress desde Softaculous

La herramienta Softaculous nos permite instalar una gran variedad de scripts de forma muy sencilla y accesible para personas sin conocimiento técnico.

La mayoría de los proveedores de hospedaje web ofrecen cPanel con Softaculous integrado, así que aquí asumiremos que estamos utilizando un servidor con cPanel y Softaculous ya instalado.

 

Lo primero que debemos hacer es ingresar a nuestra cuenta de cPanel a través de https://tudominio.com/cpanel, o ingresando directamente desde la dirección IP de tu servidor, por ejemplo: https://123.123.123.123:2083/

Los últimos 4 números después del signo de dos puntos ‘:’ indican el puerto al cual nos queremos conectar, usualmente se accede a cPanel a través del puerto 2083.

Una vez que hayas iniciado sesión correctamente en cPanel busca la sección “Softaculous Apps Installer”.

 

Clipboard01

 

Dentro de Softaculous generalmente Wordpress aparece en la página principal o también dentro de la categoría “Blogs” en el menú de selección. Cuando encuentres el ícono de WordPress oprime “install” y serás redireccionado a la página de configuración de instalación.

 

-Choose protocol: Escoge http:// para acceder a tu blog como “tublog.com” o  http://www si quieres acceder a tu blog desde “www.tublog.com”, no selecciones https:// a menos que tengas instalado un certificado SSL en tu servidor. Si no sabes que es un certificado SSL lo más probable es que no tengas instalado uno, así que mejor selecciona alguna opción http://

 

-Choose Domain: Selecciona el nombre de dominio en el cual quieres instalar tu blog.

 

-In Directory: Déjalo en blanco si quieres que tu blog se instale en la carpeta raíz de tu dominio “tublog.com” o escribe un nombre si quieres que se instale dentro de una carpeta “tublog.com/tucarpeta/”. Si lo instalas dentro de una carpeta, ésta no tiene que existir aún para evitar conflictos.

 

-Table Prefix: Es el prefijo que se le agregará a los nombres de las tablas en la base de datos para evitar conflictos, “wp_” es el valor por defecto, no hay necesidad de cambiarlo.

 

-Site Name: El nombre de tu blog, como: “Blog de Juan” o “Recetas de la abuela”, etc.

 

-Site Description: Una breve descripción de tu sitio (opcional).

 

-Enable Multisite (WPMU): Opción para crear múltiples blogs bajo un mismo dominio, déjalo desmarcado para instalaciones personales (99% de los casos).

 

-Admin Username: Selecciona un nombre de usuario para el administrador del sitio, puede ser “admin” o cualquier otra cosa.

 

-Admin Password: La contraseña para el administrador del sitio.

 

-Admin Email: Correo electrónico del administrador -necesario para poder recuperar tu cuenta en caso de que olvides tu contraseña-.

 

-Select Language: Selecciona el lenguaje para tu instalación.

 

-Select Plugins: Esta sección  te permite escoger diferentes plugins para instalarlos en tu WordPress, si lo prefieres puedes no seleccionar ninguno y tú instalarlos después desde el panel de administración.

 

Puedes ingresar un correo en “Email installation details to” para que te llegue una copia con los detalles de la instalación a tu email. Ahora sólo oprime “Install” y tu nuevo blog estará listo.