Ver Mensaje Individual
  #2 (permalink)  
Antiguo 25/05/2010, 19:58
Avatar de Panino5001
Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 5 meses
Puntos: 834
Respuesta: Rotar <video> javascript y canvas

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.