本文代码示例的源代码 在 GitHub 上可用，您可以 查看实际演示。

有 数十个视频播放器 允许您对视频执行所有正常操作：播放、暂停、跳转到特定时间等。更高级的播放器还允许您快进和倒带视频，并支持字幕。

不过，我还没有找到的是视频缩放和旋转。当然，这是一个边缘用例，但有时能够放大细节，比如失误（背景中的麦克风）或彩蛋（在每部皮克斯电影中查找“A 113”这个词——对大多数原始皮克斯团队学习技能的教室的致敬），会很酷。

当您在相机上以纵向而不是横向录制视频时，旋转可能很有用，您不想在将其发布到网络之前重新编码它。

HTML5 视频标签允许您使用 CSS 样式化视频，而 CSS3 转换允许缩放和旋转。所以让我们把它们结合起来。

嵌入视频很简单（请在 演示页面 上查看实际效果）

现在，要缩放此视频，您可以使用 CSS3 transform:scale

video{
  display:block;
  width:400px;
  height:300px;
}
video.scale2{
  -moz-transform:scale(1.5);
  -webkit-transform:scale(1.5);
  -o-transform:scale(1.5);
  -ms-transform:scale(1.5);
  transform:scale(1.5);
}

您可以使用 CSS3 transform:rotate 进行旋转

video{
  -moz-transform:rotate(20deg);
  -webkit-transform:rotate(20deg);
  -o-transform:rotate(20deg);
  -ms-transform:rotate(20deg);
  transform:rotate(20deg);
}

您也可以同时进行这两项操作

video{
  -moz-transform:scale(1.5) rotate(20deg);
  -webkit-transform:scale(1.5) rotate(20deg);
  -o-transform:scale(1.5) rotate(20deg);
  -ms-transform:scale(1.5) rotate(20deg);
  transform:scale(1.5) rotate(20deg);
}

不过，这样就没有多大意义了，因为它会改变视频的尺寸（在演示页面上，我需要相应地更改每个视频的边距）。为了真正提供“缩放”功能，我们需要保持原始大小并裁剪掉不需要的部分。我们可以使用 CANVAS 元素来实现，但为什么要这么麻烦呢，一个简单的 DIV 就能帮我们完成这项工作？

我们只需要将视频嵌套在一个带有 stage 类别的 DIV 中，以保留空间。

使裁剪起作用的 CSS 如下所示

.stage{
  width:400px;
  height:300px;
  position:relative;
}
video{
  width:400px;
  height:300px;
  position:absolute;
  top:0;
  left:0;
}

绝对定位的元素会从文档的正常流中移除。如果您 将一个绝对定位的元素放在另一个相对定位的元素内部，它的 top 和 left 值将相对于另一个元素。换句话说：视频现在完全覆盖了舞台。

如果我们旋转视频，我们仍然会看到三角形空间，就像这个例子中那样

.demostage{
  width:400px;
  height:300px;
  position:relative;
}
.demovideo{
  position:absolute;
  top:0;
  left:0;
  -moz-transform:rotate(20deg);
  -webkit-transform:rotate(20deg);
  -o-transform:rotate(20deg);
  -ms-transform:rotate(20deg);
  transform:rotate(20deg);
  width:400px;
  height:300px;
}

为了解决这个问题，我们必须在 stage DIV 中添加一个 overflow:hidden

.demostage{
  width:400px;
  height:300px;
  position:relative;
  overflow:hidden;
}
.demovideo{
  position:absolute;
  top:0;
  left:0;
  -moz-transform:rotate(20deg);
  -webkit-transform:rotate(20deg);
  -o-transform:rotate(20deg);
  -ms-transform:rotate(20deg);
  transform:rotate(20deg);
  width:400px;
  height:300px;
}

为了提供缩放和旋转功能，我们需要使用 JavaScript 和按钮供最终用户使用。这里第一个障碍是——正如您可能已经从 CSS 中意识到的那样——浏览器在语法上的差异。因此，我们需要检测当前浏览器支持哪些转换。最安全的方法是询问浏览器

var properties = ['transform', 'WebkitTransform', 'MozTransform',
                  'msTransform', 'OTransform'];
var prop = properties[0];
for(var i=0,j=properties.length;i
Once this runs we can set a transformation with the following JavaScript syntax:
var zoom = 1.5;
var rotate = 20;
v.style[prop]='rotate('+rotate+'deg) scale('+zoom+')';
Of course it doesn't make much sense to rotate the controls with the video. Therefore you need to provide your own. You can use any of the aforementioned players for that or roll your own. To demonstrate, I just built one with a single button allowing you to play and pause the video:

The full source is available on GitHub, read the comments to see what is going on here.

Just a quick example of what you can do with open technologies.
    

                                
About
                          
                Chris Heilmann              
                      
                      
Evangelist for HTML5 and open web. Let's fix this!
                    
christianheilmann.com
@codepo8
            
More articles by Chris Heilmann…