Rotar <video> javascript y canvas

walolinux · #1 (**permalink**) 24/05/2010, 07:01

Hola a todos, he seguido un tutorial para rotar una imagen jpg usando javascript y canvas...todo perfecto.

El problema es que en vez de una imagen, quiero poner un vídeo, la cosa es distinta... el vídeo de arriba se ve y el de abajo no, creo que es precisamente por ser un canvas.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
function rotar(obj,angulo){
    if (angulo >= 0) {
        var rotation = Math.PI * angulo / 180;
    } else {
        var rotation = Math.PI * (360+angulo) / 180;
    }
    var costheta = Math.cos(rotation);
    var sintheta = Math.sin(rotation);
    if (document.createElement("canvas").getContext) {
    /* ---- canvas ---- */ 
        var c=document.createElement('canvas');
        c.width = Math.abs(costheta*obj.width) + Math.abs(sintheta*obj.height);
        c.style.width = c.width+'px';
        c.height = Math.abs(costheta*obj.height) + Math.abs(sintheta*obj.width);
        c.style.height=c.height+'px';
        c.id=obj.id;
        c.style.position='absolute';
        var ctx=c.getContext('2d');
        ctx.save();
        if (rotation <= Math.PI/2) {
            ctx.translate(sintheta*obj.height,0);
        } else if (rotation <= Math.PI) {
            ctx.translate(c.width,-costheta*obj.height);
        } else if (rotation <= 1.5*Math.PI) {
            ctx.translate(-costheta*obj.width,c.height);
        } else {
            ctx.translate(0,-sintheta*obj.width);
        }
        ctx.rotate(rotation);
        ctx.drawImage(obj, 0, 0, obj.width, obj.height);
        obj.parentNode.replaceChild(c,obj);
        ctx.restore();
    }else{
    /* ---- DXImageTransform ---- */
        obj.style.position='absolute';
        obj.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
        obj.filters.item(0).M11 = costheta;
        obj.filters.item(0).M12 = -sintheta;
        obj.filters.item(0).M21 = sintheta;
        obj.filters.item(0).M22 = costheta;
    }
}
window.onload=function(){
    rotar(document.getElementById('pp'),60);
 
}
</script>
</head>
 
<body>
<video src="trailer.ogv" width="180" height="127" autoplay>video</video>
<div id="ll" style="position:relative; "><video id="pp"  src="trailer.ogv" width="180" height="127" autoplay>video</video></div>
</body>
</html>

¿Alguien me puede ayudar diciéndome como puedo rotar 90º un video (<video></video>)html5?

muchísimas gracias.

Panino5001 · #2 (**permalink**) 25/05/2010, 19:58

Con canvas podés copiar el video a un elemento canvas con drawImage (en lugar de una imagen, usás el mismo video) y luego simulás que el canvas es un video usando setInterval y repitiendo la operación de copiado por ejemplo cada 30 segundos.
Sin embargo, en realidad no necesitás canvas para eso. Los navegadores modernos soportan transformaciónes css que te permiten rotar un elemento sin necesidad de agregados. Un ejemplo que funciona en Safari, Ópera, Firefox, Chrome y Explorer es este, con imagen:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<style>*{margin:0}</style> 
<script> 
function rotate(angle){ 
    if (angle >= 0) { 
        var rotation = Math.PI * angle / 180; 
    } else { 
        var rotation = Math.PI * (360+angle) / 180; 
    } 
    var costheta = Math.cos(rotation); 
    var sintheta = Math.sin(rotation);  
    if(document.createElement("canvas").getContext){ 
        this.style.position='relative'; 
        var width = Math.abs(costheta*this.offsetWidth) + Math.abs(sintheta*this.offsetHeight); 
        var height = Math.abs(costheta*this.offsetHeight) + Math.abs(sintheta*this.offsetWidth); 
        this.style.left=-(this.offsetWidth-width)/2+'px'; 
        this.style.top=-(this.offsetHeight-height)/2+'px'; 
        this.style.webkitTransform ='rotate('+angle+'deg)';     
        this.style.MozTransform='rotate('+angle+'deg)';     
        this.style.OTransform='rotate('+angle+'deg)'; 
        this.style.rotation=angle+'deg'; 
    }else{ 
         
        this.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"; 
        this.filters.item(0).M11 = costheta; 
        this.filters.item(0).M12 = -sintheta; 
        this.filters.item(0).M21 = sintheta; 
        this.filters.item(0).M22 = costheta;  
    } 
} 
onload=function(){ 
    rotate.call(document.getElementById('im'),350);     
} 
</script> 
</head> 
 
<body> 
<img id="im" src="arwen.jpg" width="500" height="350" /> 
</body> 
</html>

Si en lugar de una imagen colocás un video, funcionará sin problema, siempre que el navegador soporte el formato de video que apliques.

walolinux · #3 (**permalink**) 26/05/2010, 04:47

Muchísimas gracias, funciona a la perfección!!!!!.

Panino5001 · #4 (**permalink**) 26/05/2010, 06:57

Me alegra que te sirva. Una acotación: donde dije cada 30 segundos, quise decir cada 30 milisegundos.

Y una mejor manera de identificar a Explorer es usando window.ActiveXObject:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Girar Objetos</title>
<style>*{margin:0}</style>
<script>
function rotate(angle){
    if (angle >= 0) {
        var rotation = Math.PI * angle / 180;
    } else {
        var rotation = Math.PI * (360+angle) / 180;
    }
    var costheta = Math.cos(rotation);
    var sintheta = Math.sin(rotation); 
    if(!window.ActiveXObject){
        this.style.position='relative';
        var width = Math.abs(costheta*this.offsetWidth) + Math.abs(sintheta*this.offsetHeight);
        var height = Math.abs(costheta*this.offsetHeight) + Math.abs(sintheta*this.offsetWidth);
        this.style.left=-(this.offsetWidth-width)/2+'px';
        this.style.top=-(this.offsetHeight-height)/2+'px';
        this.style.webkitTransform ='rotate('+angle+'deg)';    
        this.style.MozTransform='rotate('+angle+'deg)';    
        this.style.OTransform='rotate('+angle+'deg)';
        this.style.rotation=angle+'deg';
    }else{
        this.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
        this.filters.item(0).M11 = costheta;
        this.filters.item(0).M12 = -sintheta;
        this.filters.item(0).M21 = sintheta;
        this.filters.item(0).M22 = costheta; 
    }
}
onload=function(){
    rotate.call(document.getElementById('im'),50);    
}
</script>  
</head>

<body>
<img src="Dr__House___Illustrator_Vector_by_juliocfg.jpg" width="400" height="316" />
<br />
<img id="im" src="Dr__House___Illustrator_Vector_by_juliocfg.jpg" width="400" height="316" />
</body>
</html>

Aquí hay un ejemplo funcionando: http://www.disegnocentell.com.ar/notas2.php?id=255

walolinux · #5 (**permalink**) 26/05/2010, 14:58

Ya, lo de los milisegundos, ya me lo imaginé.

Gracias de nuevo.

Saludos.

walolinux · #6 (**permalink**) 23/06/2010, 09:30

Hola de nuevo, este ejemplo me funcionaba, y de hecho me funciona en un html plano con el ejemplo que me pasaste, pero a la hora de implementarlo en mi web, no me obedece

. EL video se queda en horizontal.

Te dejo un ejemplo del video en Horizontal:
http://www.webcamburgos.com/webcams/webcam-catedral-plaza-del-rey-san-fernando/

y el de vertical:
http://www.webcamburgos.com/webcams/webcam-catedral-arco-santa-maria/

como se puede ver, la diferencia esta en el head, donde imprimo las cabeceras javascript, y el video si tiene el id que tiene el javascript.

He probado a poner el onload en el body, pero tampoco va...¿me podeis echar un último cable?
Gracias.

Panino5001 · #7 (**permalink**) 25/06/2010, 07:53

Estás intentando rotarlo usando el evento onload del body, pero luego lo sobreescribes con un window.onload, como podés comprobarlo escribiendo en la barra de direcciones del navegador lo siguiente:

Código PHP:

  javascript:alert(window.onload.toString())

Te sugiero que leas cómo evitar los conflictos de sobreescritura de los onload usando la función addLoadEvent de Simón Willison: http://simonwillison.net/2004/May/26/addLoadEvent/