Html5视频透视变换 [英] Html5 video perspective transform

问题描述

是否可以通过CSS或jquery视频透视设置恰当的位置和如何我需要它？

查看图片：

我想要视频放在红色区域。

提前感谢！

解决方案

是的，这是可能的。您需要熟悉CSS3 transform 和透视属性。

.video-wrapper {perspective：1000px;} video {transform：rotateY（-30deg）;}

 < div class =video-wrapper> < video width =400controls> < source src =http://www.w3schools.com/HTML/mov_bbb.mp4type =video / mp4> < source src =http://www.w3schools.com/HTML/mov_bbb.oggtype =video / ogg>您的浏览器不支持HTML5视频。 < / video>< / div>  

所有的努力创建一个解决方案，你可以使用一个HTML5 画布元素

Would it be possible to set via CSS or jquery video perspective to fit exactly where and how I need it ?

See picture:

I want the video to fit in the red area.

Thanks in advance!

解决方案

Yes, it is possible. You will need to familiarize yourself with CSS3 transform and perspective properties.

.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>

Without going through all of the effort to create a solution, you can use an HTML5 canvas element

这篇关于Html5视频透视变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！