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.