使用 Internet Explorer 缩放的视频

Question

我在使用 Internet Explorer 时遇到了严重问题。 我真的需要在我的 CSS 中使用缩放功能，但是视频的质量完全变差了。 它适用于 Chrome（我认为是 Firefox）但不适用于 IE。

有什么技巧可以让这变得更好吗？ 我看到了一些改变图像质量的 CSS 技巧，但这不适用于视频。

这是一个代码测试（将光标放在视频上进行缩放）：http://jsfiddle.net/MxxAv/145/

HTML：

<video autoplay id="video" src="http://www.html5videoplayer.net/videos/toystory.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video>

CSS

#video {
    width: 200px;
    height: 113px;
}

#video:hover {
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform: scale(2.3);
    -webkit-transform: scale(2.3);
}

感谢您的帮助！

Answer 1

添加原始比例可能会有所帮助。此外，对于跨浏览器支持，它有助于使用所有供应商前缀。请注意，我将没有前缀的命令移到了底部。浏览器应用最后一个可用的命令，因此如果浏览器需要前缀，您只需将前缀命令移到底部即可。我在您的代码中添加了供应商前缀和缩放比例，以及仅用于踢球的持续时间:)

#video {
    width: 284px;
    height: 160px;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

#video:hover {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(2.8);
    -moz-transform: scale(2.8);
    -ms-transform: scale(2.8);
    -o-transform: scale(2.8);
    transform: scale(2.8);
}