Html5 video perspective transform

问题

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!

回答1:

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

来源：https://stackoverflow.com/questions/37354506/html5-video-perspective-transform