Html5视频透视变换

Question

是否可以通过CSS或jquery视频设置来准确地确定我需要它的位置和方式？

见图：

我希望视频适合红色区域。

提前致谢！

Answer 1

是的，有可能。您需要熟悉CSS3 transform和perspective属性。

.video-wrapper {
  perspective: 1000px;
}
video {
  transform: rotateY(-30deg);
}

<div class="video-wrapper">
  <video width="400" controls>
    <source src="http://www.w3schools.com/HTML/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/HTML/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div>

无需完成创建解决方案的所有工作，您可以使用HTML5 canvas元素