12.- Juegos y Multimedia HTML5 - Cargar archivos arrastrando y soltando y animaciones CSS3 @keyframe

Lo prometido es deuda. Aprendamos a cargar archivos a nuestro navegador arrastrando y soltando archivos a nuestra página. Además, de forma rápida, casi a modo de curiosidad, aprenderemos a utilizar la regla especial de CSS3 @keyframe.
Tenéis que ser conscientes de que la información que os ofrecemos en este vídeo no es suficiente como para dominar a la perfección la carga de archivos al navegador o la creación de animaciones con @keyframe. Todos los conceptos que vemos en los vídeos deben de ser trabajados por vuestra cuenta. Si algún tema os interesa más que otros, profundizar en él, realizar vuestras propias aplicaciones y compartirlas con todos nosotros ;)
La página creada en el videotutorial la podéis encontrar aquí.



Código del vídeo.
<!DOCTYPE html>
<html>
  <head>
    <title>Videos en los Canvas</title>
    <meta charset="UTF-8">
    <meta name="author" content="http://programmingheroes.blogspot.com.es">
    <style>        
        #dropArea {
            text-align: center;
            outline: 5px dashed #6060bd;
            -webkit-border-radius: 50px;
            -moz-user-select: none;
            -webkit-user-select: none;
        }
        
        @font-face {
            font-family : "beautiful";
            src: url("fonts/the beautiful ones.woff") format("woff"),
                url("fonts/the beautiful ones.ttf") format("truetype");
        }
        
        h1 {
            -webkit-animation: fade 5s;
            -webkit-animation-delay: 0s;
            -webkit-animation-iteration-count: infinite;
            font-family: "beautiful";
            padding: 10px;
        }
        
        @-webkit-keyframes fade {
            0% {opacity:0.1;}
            40% {opacity:1;}
            60% {opacity:1;}
            100% {opacity:0.1;}
        }
        
        canvas {
            position: absolute;
            left: 50%;
            top: 50%;
        }
        
     #canvasControles {
            box-shadow: 0px 0px 10px #000;
        }
        
        .bn {
            -webkit-filter: grayscale(100%);
        }
        
    </style>
    <script>
        var dropArea;
        var canvasVideo, ctxVideo, video;
        var canvasControles, ctxControles, controles;
        var xPoint, yPoint, down;
        var paintVideoInterval, paintControlesInterval;
        
        window.addEventListener('load', function () {
            dropArea = document.getElementById("dropArea");
            if (!hayCanvas()) {
                alert("Tu navegador no soporta canvas");
            }
            video = document.createElement("video");
            if (video == null) {
                alert("Tu navegador no soporta video");
            }
            canvasVideo = document.getElementById("canvasVideo");
            canvasControles = document.getElementById("canvasControles");
            ctxVideo = canvasVideo.getContext("2d");
            ctxControles = canvasControles.getContext("2d");
            video.src = "video/Gatitos.webm";
            video.addEventListener('loadedmetadata', videoLoadedMetadata);
            video.addEventListener('canplay', videoCanPlay);
            dropArea.addEventListener('dragover', dragOverEvent);
            dropArea.addEventListener('drop', dropEvent);

            var play = new Boton(pintarPlay, playPause);
            var mute = new Boton(pintarMute, muted);
            var bn = new Boton(pintarBn, accionBn);
            controles = [play, mute, bn];

            canvasControles.addEventListener("mousedown", mouseDown);
            canvasControles.addEventListener("mouseup", mouseUp);
            canvasControles.addEventListener("mouseout", mouseUp);
            canvasControles.addEventListener("mousemove", movePoint);
        });
        
        function videoLoadedMetadata(e) {
            var w = canvasVideo.width = canvasControles.width =
                video.videoWidth;
            var h = canvasVideo.height = canvasControles.height =
                video.videoHeight;
            canvasVideo.style.setProperty("margin-top", ""+(-h/2)+"px");
            canvasVideo.style.setProperty("margin-left", ""+(-w/2)+"px");
            canvasControles.style.setProperty("margin-top", ""+(-h/2)+"px");
            canvasControles.style.setProperty("margin-left",""+(-w/2)+"px");
        }

        function videoCanPlay(e) {
            paintVideoInterval = setInterval(paintVideo, 33);
            paintControlesInterval = setInterval(paintControles, 11);
        }
        
        function dragOverEvent(e) {
            e.stopPropagation();
            e.preventDefault();
            e.dataTransfer.dropEffect = 'copy';
        }
        
        function dropEvent(e) {
            e.stopPropagation();
            e.preventDefault();
            var files = e.dataTransfer.files;
            var f;
            for (var i = 0, f; f = files[i]; i++) {
                f = files[i];
                if (f.type.indexOf("video") == -1) {
                    continue;
                }
                window.clearInterval(paintVideoInterval);
                window.clearInterval(paintControlesInterval);
                var reader = new FileReader();
                reader.addEventListener("load", function (evt) {
                    video.src = evt.target.result;
                });
                reader.readAsDataURL(f);
                break;
            }
        }
        
        function paintVideo() {
            ctxVideo.drawImage(video, 0, 0,
                canvasVideo.width, canvasVideo.height);
        }
        
        function paintControles() {
            ctxControles.clearRect(0, 0, canvasControles.width,
                canvasControles.height);
            for (var i=0; i<controles.length; i++) {
                controles[i].mover();
                if (down && 
                    (controles[i].x-xPoint)*(controles[i].x-xPoint)+
                    (controles[i].y-yPoint)*(controles[i].y-yPoint)
                    <= controles[i].r*controles[i].r) {
                        controles[i].accion();
                        down = false;
                }
                controles[i].estilo(ctxControles);
            }
        }
        
        function mouseDown(e) {
            down = true;
            movePoint(e);
        }
        
        function mouseUp(e) {
            down = false;
        }
        
        function movePoint(e) {
            var ie = navigator.userAgent.toLowerCase()
                .indexOf('msie')!=-1;
            if (ie) {
                e = window.event;
                e.pageX = e.clientX+window.pageXOffset;
                e.pageY = e.clientY+window.pageYOffset;
            }
            xPoint = e.pageX-canvasControles.offsetLeft;
            yPoint = e.pageY-canvasControles.offsetTop;
        }
        
        function hayCanvas() {
            var elem = document.createElement('canvas');
            return !!(elem.getContext && elem.getContext('2d'));
        }
        
        function Boton(estilo, accion) {
            this.r = canvasControles.width*0.05;
            this.x = this.r+Math.random()*(canvasControles.width-this.r);
            this.y = this.r+Math.random()*(canvasControles.height-this.r);
            this.vx = (Math.random()-0.5)*4;
            this.vy = (Math.random()-0.5)*4;
            this.accion = accion;
            this.estilo = estilo;
        }
        
        Boton.prototype = {
            mover: function() {
                this.x += this.vx;
                if (this.x+this.r > canvasControles.width) {
                    this.vx = -this.vx;
                    this.x = canvasControles.width-this.r;
                } else if (this.x-this.r < 0) {
                    this.vx = -this.vx;
                    this.x = this.r;
                }
                this.y += this.vy;
                if (this.y+this.r > canvasControles.height) {
                    this.vy = -this.vy;
                    this.y = canvasControles.height-this.r;
                } else if (this.y-this.r < 0) {
                    this.vy = -this.vy;
                    this.y = this.r;
                }
            }
        }
        
        function playPause() {
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        }
        
        function pintarPlay(ctx) {
            // Círculo de fondo
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
            ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
            ctx.closePath();
            ctx.fill();
            // Dibujo
            ctx.beginPath();
            if (video.paused) {
                ctx.moveTo(this.x-this.r/2, this.y-this.r/2);
                ctx.lineTo(this.x-this.r/2, this.y+this.r/2);
                ctx.lineTo(this.x+this.r/2, this.y);
                ctx.lineTo(this.x-this.r/2, this.y-this.r/2);
            } else {
                ctx.moveTo(this.x-this.r/2, this.y-this.r/2);
                ctx.lineTo(this.x-this.r/2, this.y+this.r/2);
                ctx.lineTo(this.x-this.r*0.2, this.y+this.r/2);
                ctx.lineTo(this.x-this.r*0.2, this.y-this.r/2);
                ctx.lineTo(this.x-this.r/2, this.y-this.r/2);
          
                ctx.moveTo(this.x+this.r/2, this.y-this.r/2);
                ctx.lineTo(this.x+this.r/2, this.y+this.r/2);
                ctx.lineTo(this.x+this.r*0.2, this.y+this.r/2);
                ctx.lineTo(this.x+this.r*0.2, this.y-this.r/2);
                ctx.lineTo(this.x+this.r/2, this.y-this.r/2);
            }
            ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
            ctx.closePath();
            ctx.fill();
        }
        
        function muted() {
            video.muted = !video.muted;
        }
        
        function pintarMute(ctx) {
            // Círculo de fondo
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
            ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
            ctx.closePath();
            ctx.fill();
            // Altavoz
            ctx.beginPath();
            ctx.moveTo(this.x-this.r/2, this.y-this.r/4);
            ctx.lineTo(this.x-this.r/2, this.y+this.r/4);
            ctx.lineTo(this.x, this.y+this.r/4);
            ctx.lineTo(this.x+this.r/2, this.y+this.r/2);
            ctx.lineTo(this.x+this.r/2, this.y-this.r/2);
            ctx.lineTo(this.x, this.y-this.r/4);
            ctx.lineTo(this.x-this.r/2, this.y-this.r/4);
            ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
            ctx.closePath();
            ctx.fill();
            // Silencio o no
            if (video.muted) {
                ctx.beginPath();
                ctx.moveTo(this.x-this.r/2, this.y-this.r/2);
                ctx.lineTo(this.x+this.r/2, this.y+this.r/2);
                ctx.strokeStyle = "rgba(255, 50, 50, 0.5)";
                ctx.closePath();
                ctx.stroke();
            }
        }
        
        function accionBn() {
            canvasVideo.classList.toggle("bn");
        }
        
        function pintarBn(ctx) {
            // Círculo de fondo
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, Math.PI, Math.PI*2);
            ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
            ctx.closePath();
            ctx.fill();
            // Altavoz
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI);
            ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
            ctx.closePath();
            ctx.fill();
        }
    </script>
  </head>
  <body style="background-color: #AAA">
      <noscript>
        No tiene habilitado JavaScript. Debería habilitarlo para
        poder disfrutar al completo de los contenidos de
        esta página.
      </noscript>
      <div id="dropArea">
          <h1>Arrastra cualquier video aqui para reproducirlo</h1>
          <canvas id="canvasVideo">
              Tu navegador no soporta el elemento 
              <code>canvas</code> de HTML5.
          </canvas>
          <canvas id="canvasControles">
          </canvas>
      </div>
  </body>
</html>

2 comentarios :

  1. Hola, dejaste privado el video y no se puede ver.

    ResponderEliminar
    Respuestas
    1. Muchíííísimas gracias de verdad! Gracias por informar, que si no no me habría dado cuenta.
      Saludos amigo!

      Eliminar