Stanford Javascript Crypto Library es una librería Javascript que permite encriptar y desencriptar de forma muy segura, potente, rápida, sencilla, ligera y compatible con navegadores.
Usa el algoritmo estándar AES de 128, 192 o 256 bits, la función hash SHA256, el código de autenticación HMAC, PBKDF2, y los modos CCM y OCB… vamos, todo muy seguro.
Una de las cosas que diferencia a YouTube de los demás es su API, la cual nos permite trabajar con los vídeos de forma muy sencilla. Y algo que echo en falta cuando me pasan videos de YouTube, ya sea en la propia web o en un videoblog, es tener que esperar a que llegue el momento destacado que querían que viera o tener que “jugar” con el controlador hasta que doy con el tiempo adecuado.
Por eso se me ha ocurrido que mediante la API se podría evitar esta situación facilmente, tan solo habría que indicar mediante un anchor la posición que queremos que se cargue el vídeo, ya sea mediante enlaces en la propia web o mediante la propia URL.
Se trata de un script muy sencillo, el cual he realizado sin frameworks como jQuery, porque a parte de intentar no olvidar el javascript normal, tampoco era necesario meterle jQuery o parecido. Eso sí, he utilizado swfobject porque es más sencillo trabajar con esta librería.
El script consta de dos partes: modificar los enlaces con anchors a partes del vídeo y acceder a una posición concreta del vídeo si se indica en la URL. Para ello es necesaria la función onYouTubePlayerReady, que es la que se ejecuta cuando el player de YouTube se carga y la API de javascript está activada.
var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/AaO1FzE6J9I&border=0&enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer", "425", "344", "8", null, null, params, atts);
function onYouTubePlayerReady() {
// Calcula los segundos de un tiempo
var segundos = function(tiempo) {
var fact = 1;
var segs = 0;
for(var j=tiempo.length-1; j>=0; j--) {
segs += tiempo[j]*fact;
fact *= 60;
}
return segs;
}
// Modifico los anchors del video
var enlaces = document.getElementById('marcadores').getElementsByTagName('a');
for(var i=0; i<enlaces.length; i++) {
enlaces[i].addEventListener('click', function() {
var tiempo=this.href.substring(this.href.indexOf('#')+1).split(':');
var player = document.getElementById('myytplayer');
player.seekTo(segundos(tiempo), true);
player.playVideo();
return false;
}, true);
}
// Accedo al tiempo específico de la URL
var href = document.location.href;
if ((pos = href.indexOf('#')+1)) {
var player = document.getElementById('myytplayer');
player.seekTo(segundos(href.substring(pos).split(':')));
player.playVideo();
}
}
El formato del marcador tiene que ser #HH:MM:SS o #MM:SS o #SS
Yo creo que este script puede ser muy útil para los videoblogs para marcar momentos específicos y para que los visitantes puedan enviar a sus amigos los momentos que más le interesan.
Uno de los problemas con los que nos solemos encontrar cuando programamos en Javascript es el modo en el que obtenemos los elementos HTML que deseamos tratar, a parte del conocido getElementById(), existen otros, algunos estándar y otros desarrollados por otra gente.
Aunque Microsoft dijo que se iba a centrar en corregir los errores en CSS y no en Javascript, no está mal decir que cosas se ha corregido y cuales estarían bien para futuras versiones.
Los errores que se han corregido son: los memory leaks cuando se hacían referencias circulares entre elementos, un fallo que cerraba la aplicación cuando se usaba la función normalize() y soporte para XMLHttpRequest de forma nativa en vez de mediante ActiveX.
Los errores que no estaría mal que corrigieran en futuras versiones son: getElementById debería ignorar el atributo name, debería cambiar el window.location cuando se navega entre referencias en el mismo documento mediante el historial, cuando se mueven checkbox mediante métodos del DOM recuperan el estado original y no conservan el que tenían, setAttribute no funciona con el atributo style o con eventos, varios atributos necesitan ser escritos usando las máyusculas en las iniciales de las plabras (camelCase), radio buttons clonados no crean su propio grupo.
Algo bastante importante en un proyecto es la configuración y cómo se gestiona. Para facilitar la gestión usaremos dos librerías dotenv y confidence, la primera permite usar ficheros .env en nuestro entorno de desarrollo para simular variables de entorno. La segunda nos ayudará a recuperar las variables de un objeto permitiendo usar filtros, por ejemplo según de las variables de entorno.
Instalaremos los paquetes:
npm i dotenv
npm i confidence
Confidence necesitará un criterio que nos permitirá obtener distintos resultados según su valor. Imaginemos que tenemos el siguiente criterio:
Si queremos acceder al nivel de debug, al ser env igual a development, obtendíamos INFO.
Vale, ¿y cómo lo usamos en el proyecto? Primero creamos una carpeta config, donde crearemos el fichero index.js que tendrá toda la configuración del servidor:
const Confidence = require( 'confidence' );
const Dotenv = require( 'dotenv' );
Dotenv.config( { silent: true } );
// NODE_ENV is used in package.json for running development or production environmentconst criteria = {
env: process.env.NODE_ENV,
};
const config = {
port: 3001,
};
const store = new Confidence.Store( config );
exports.get = function( key ) {
return store.get( key, criteria );
};
exports.meta = function( key ) {
return store.meta( key, criteria );
};
Dotenv simplemente se usa para obtener de las variables de entorno de servidor el valor de NODE_ENV. Por ahora solo tendremos la variable port, pero ya estará preparado para poder añadir otras variables de configuración posteriormente.
Creamos un store de Confidence y exportaremos los métodos get y meta.
Haremos algo parecido para el manifest necesario para Glue, creando el fichero manifest.js dentro del directorio config:
Hace ya tiempo escribà en display: NONE cómo hacer que el texto se autocompletara en una caja de texto según se fuera escribiendo en ella. En esa entrada comentaba que la obtención de los datos, que era mediante Javascript, se podÃa realizar mediante AJAX. Hoy vamos a explicar cómo se harÃa esa llamada mediante AJAX.
One Comment
Comments are closed.