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 元素

Html5 视频透视变换

Html5 video perspective transform

jquery

css

html

video

perspective