├── README ├── html5-badge-h-css3-multimedia-semantics.png ├── index.html ├── mainstyles.css ├── rotate-with-stages.html ├── rotate.html ├── transforming-video.html └── transformvideo.js /README: -------------------------------------------------------------------------------- 1 | HTML5 video player with zoom and rotate feature 2 | 3 | Just a simple example how you can use CSS3 transformations on 4 | HTML5 video. 5 | 6 | Check the accompanying blog post on Mozilla: https://hacks.mozilla.org/2011/01/zooming-and-rotating-for-video-in-html5-and-css3/ 7 | 8 | -------------------------------------------------------------------------------- /html5-badge-h-css3-multimedia-semantics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codepo8/rotatezoomHTML5video/4c1861ec4d926e52c9ac419490ee4fdbb80ed22e/html5-badge-h-css3-multimedia-semantics.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transforming video 7 | 8 | 11 | 12 | 13 |

Transforming HTML5 video with CSS3

14 | 22 |

These are the demo files for the blog post on Mozilla about scaling and rotating HTML5 video.

23 | 24 |

This is the final outcome:

25 | 26 |

Screencast:

27 | 28 | 29 | 38 | 39 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /mainstyles.css: -------------------------------------------------------------------------------- 1 | * {margin:0;padding:0;} 2 | html,body{font-size:14px;font-family:Helvetica,arial,sans-serif;} 3 | header,video,footer,nav{display:block;} 4 | body{padding:3em;} 5 | nav{padding:.5em;background:#ccc;border-radius:5px;-moz-border-radius:5px; 6 | -webkit-border-radius:5px;} 7 | h1{font-size:20px;margin:0 0 1em 0;color:#393;} 8 | h2{font-size:18px;margin:1em 0;color:#363;} 9 | nav li{display:inline;padding-right:2em;} 10 | a{color:#369;font-weight:bold;} 11 | nav a{ color:#333;} 12 | nav strong{color:#030;} 13 | footer{font-size:80%;margin:5em 0;text-align:center;} 14 | footer a img{border:none;display:block;margin:.5em auto;} 15 | -------------------------------------------------------------------------------- /rotate-with-stages.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transforming video 7 | 8 | 62 | 63 | 64 |

Transforming HTML5 video with CSS3

65 | 73 | 74 |

How it works

75 | 76 |
Stage
Video
77 | 78 |
Stage
Video
79 | 80 |

Normal video:

81 | 82 |
86 | 87 |

Scaled to 150%:

88 | 89 |
95 | 96 |

Rotated by 20 degrees:

97 | 98 |
104 | 105 |

Scaled and rotated:

106 | 107 |
113 | 114 | 115 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /rotate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transforming video 7 | 8 | 39 | 40 | 41 |

Transforming HTML5 video with CSS3

42 | 50 |

Normal video:

51 | 60 | 61 |

Scaled to 150%:

62 | 63 | 68 | 69 |

Rotated by 20 degrees:

70 | 71 | 76 | 77 |

Scaled and rotated:

78 | 79 | 83 | 84 | 85 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /transforming-video.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transforming video 7 | 8 | 20 | 21 | 22 |
23 |

Transforming HTML5 video with CSS3

24 | 32 | 33 |
34 | 43 |
44 |
45 | 49 |
50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /transformvideo.js: -------------------------------------------------------------------------------- 1 | /* 2 | Zooming and rotating HTML5 video player 3 | Homepage: http://github.com/codepo8/rotatezoomHTML5video 4 | Copyright (c) 2011 Christian Heilmann 5 | Code licensed under the BSD License: 6 | http://wait-till-i.com/license.txt 7 | */ 8 | (function(){ 9 | 10 | /* predefine zoom and rotate */ 11 | var zoom = 1, 12 | rotate = 0; 13 | 14 | /* Grab the necessary DOM elements */ 15 | var stage = document.getElementById('stage'), 16 | v = document.getElementsByTagName('video')[0], 17 | controls = document.getElementById('controls'); 18 | 19 | /* Array of possible browser specific settings for transformation */ 20 | var properties = ['transform', 'WebkitTransform', 'MozTransform', 21 | 'msTransform', 'OTransform'], 22 | prop = properties[0]; 23 | 24 | /* Iterators and stuff */ 25 | var i,j,t; 26 | 27 | /* Find out which CSS transform the browser supports */ 28 | for(i=0,j=properties.length;i' + 44 | '' + 45 | '' + 46 | '' + 47 | '' + 48 | '' + 49 | '' + 50 | '' + 51 | '' + 52 | '' + 53 | ''; 54 | } 55 | 56 | /* If a button was clicked (uses event delegation)...*/ 57 | controls.addEventListener('click',function(e){ 58 | t = e.target; 59 | if(t.nodeName.toLowerCase()==='button'){ 60 | 61 | /* Check the class name of the button and act accordingly */ 62 | switch(t.className){ 63 | 64 | /* Toggle play functionality and button label */ 65 | case 'play': 66 | if(v.paused){ 67 | v.play(); 68 | t.innerHTML = 'pause'; 69 | } else { 70 | v.pause(); 71 | t.innerHTML = 'play'; 72 | } 73 | break; 74 | 75 | /* Increase zoom and set the transformation */ 76 | case 'zoomin': 77 | zoom = zoom + 0.1; 78 | v.style[prop]='scale('+zoom+') rotate('+rotate+'deg)'; 79 | break; 80 | 81 | /* Decrease zoom and set the transformation */ 82 | case 'zoomout': 83 | zoom = zoom - 0.1; 84 | v.style[prop]='scale('+zoom+') rotate('+rotate+'deg)'; 85 | break; 86 | 87 | /* Increase rotation and set the transformation */ 88 | case 'rotateleft': 89 | rotate = rotate + 5; 90 | v.style[prop]='rotate('+rotate+'deg) scale('+zoom+')'; 91 | break; 92 | /* Decrease rotation and set the transformation */ 93 | case 'rotateright': 94 | rotate = rotate - 5; 95 | v.style[prop]='rotate('+rotate+'deg) scale('+zoom+')'; 96 | break; 97 | 98 | /* Move video around by reading its left/top and altering it */ 99 | case 'left': 100 | v.style.left = (parseInt(v.style.left,10) - 5) + 'px'; 101 | break; 102 | case 'right': 103 | v.style.left = (parseInt(v.style.left,10) + 5) + 'px'; 104 | break; 105 | case 'up': 106 | v.style.top = (parseInt(v.style.top,10) - 5) + 'px'; 107 | break; 108 | case 'down': 109 | v.style.top = (parseInt(v.style.top,10) + 5) + 'px'; 110 | break; 111 | 112 | /* Reset all to default */ 113 | case 'reset': 114 | zoom = 1; 115 | rotate = 0; 116 | v.style.top = 0 + 'px'; 117 | v.style.left = 0 + 'px'; 118 | v.style[prop]='rotate('+rotate+'deg) scale('+zoom+')'; 119 | break; 120 | } 121 | 122 | e.preventDefault(); 123 | } 124 | },false); 125 | })(); --------------------------------------------------------------------------------