En este artículo, vamos a ver cómo recompensar a los usuarios que ven vídeos en nuestro sitio web. Estos solamente serían recompensados por ver el vídeo completo. No se contemplará que le hayan dado para adelante, ni que se hayan saltado partes. Además, solo se les recompensará una vez para cada vídeo.
No vamos a realizar un back-end para esta aplicación, así que vamos a utilizar un archivo JSON estático con la lista de todos los vídeos que publicaremos en la web. Leeremos el archivo JSON y después mostraremos los vídeos a través de un XHR. Cada vídeo completo visto contará como 50 puntos.
Ya que no vamos a desarrollar un backend vamos a almacenar los puntos que el usuario tiene hasta ahora y un array de todos los vídeos que el usuario ya ha visto en localStorage. Si deseas implementar un backend para esta aplicación, hazlo como desees y como mejor te venga.
Para este desarrollo no utilizaremos ningún framework ni librería, simplemente JavaScript básico
El código
En primer lugar, simulamos una respuesta JSON de nuestro servidor
api.json
{
"videos" : [
"appVideos/us-combat.mp4",
"appVideos/steam-whistle.mp4",
"appVideos/panorama.mp4"
]
}
Luego, creamos nuestra página y configuramos algunos estilos básicos.
#messages es el elemento donde escribiremos que el usuario ha ganado puntos o que ya se ha visto el vídeo y que, por lo tanto, no percibirá puntos por él.
#video-wrapper es el elemento donde vamos a cargar las rutas de los vídeos a través de AJAX.
<!DOCTYPE html>
<html>
<head>
<title>Video App</title>
<meta charset='utf-8'>
<style>
body {
width: 960px;
margin: 0 auto;
text-align: center;
}
h1,h2 {
font-family: "Comic Sans MS";
}
#video-wrapper video {
border: 4px groove crimson;
}
</style>
</head>
<body>
<div id='messages'>
<h1>Watch videos and earn points.</h1>
</div>
<div id="video-wrapper">
<script>
var points = parseInt(localStorage.points, 10) || 0;
var watched = localStorage.watched || [];
if (typeof watched !== "object") {
watched = JSON.parse(watched);
}
Establecemos los puntos al mismo valor que los puntos actuales almacenados en el localStorage o los dejamos a 0 si ni siquiera están definidos en el localStorage.
Inicializamos la variable de videos vistos. A continuación, comprobamos si se trata de un objeto (porque localStorage almacena sólo texto y si no es un objeto (el array vacío) sería una cadena) y si no es un objeto, parseamos la cadena del localStorage como JSON.
Creamos un controlador para cuando el DOM esté listo: window.onload = function (){ y dentro, realizamos la llamada AJAX:
var xhr = new XMLHttpRequest();
xhr.onload = reqListener;
xhr.open("get", "api.json", true);
xhr.send();
Leemos api.json y ejecutamos la función reqListener siempre que la solicitud esté completa.
A continuación, analizamos los responseText como JSON e recorremos cada vídeo para añadirlos al DOM.
Añadimos un detector de eventos 'ended' para cada vídeo y comprobamos si this.played.length es igual a 1. Sería 1 sólo cuando el usuario haya visto el vídeo entero.
Si ha visto el vídeo entero, comprobamos si ese vídeo está en el array, y si es así, le mostramos un mensaje diciéndole que ese vídeo ya lo ha visto y que los puntos no se contabilizarán. Si no está en el array, lo añadimos al array, le contabilizamos sus puntos y le mostramos un mensaje de felicitación.
Eso es todo lo que hay que hacer. Ahora, puedes sacar partido de todo esto y ponerlo en práctica en tus propios proyectos.
function reqListener () {
var videoSrc,video, response = JSON.parse(this.responseText);
for (var i = 0, x = response.videos.length; i < x; i++) {
videoSrc = response.videos[i];
video = document.createElement("video");
video.setAttribute("id", videoSrc);
video.setAttribute("src", videoSrc);
video.setAttribute("controls", "controls");
document.getElementById("video-wrapper").appendChild(video);
document.getElementById(videoSrc).addEventListener("ended", function() {
if (this.played.length === 1) {
if (watched.indexOf(this.id) === -1) {
points += 50;
localStorage.points = points;
watched.push(this.id);
localStorage.watched = JSON.stringify(watched);
document.getElementById("messages").innerHTML += "<h2>You watched a new video. +50 pts -> Points so far:" + points + "</h2>";
}
else {
document.getElementById("messages").innerHTML += "<h2>No points for ya this time, mate. You already watched this :( </h2>" ;
}
}
})
}
}
Si tienes alguna duda, dínoslo en nuestra caja de comentarios más abajo. Y si te ha gustado el artículo, compártelo en redes sociales.
Fuente: phpgang.com