Transform implementation of HTML5 video label videos Proportional stretching examples _ related skills

Once upon a time, the project has met the demand for video proportional stretching, but found this seemingly ordinary but a demand, search all over the net has not found a solution. Because the force to set the width and height of the video label will only stretch the display area, but the videos inside the original ratio, how to tune is useless:

Because when I stretch horizontally:

When I stretch vertically:

2016-09-21 11:15:40 Update:

Thank @RileyRen Reminder, there are object-fit this attribute, it is set to fill to meet the demand, tears run ~, this article will be seen as a joke, ah, but you can see my home Meow star debut.

<style> video
{
 object-fit:fill;
 width:800px;
 height:320px;
}
</style>
 
 

But this attribute compatibility is not very good, ie annihilated, Android to 4.4.3 Above support:

So I still have a little value in this method, haha.

Solution One

Some people will say that, since the Web page does not stretch the ratio, then directly to the video with the transfer tool to stretch the ratio and then turn the code is not it?

Yes, that's the first solution I'm talking about, but it's not a problem for a small amount of video, and if you have a lot of video, it's not realistic to upload all of your transcoding. I did it at first, but then I found there were other ways.

Workaround Two

Is the title said, borrow transform to achieve the video proportional stretching. In 2 cases, the width-height ratio becomes larger and the ratio of width to height becomes smaller.

Full Demo Demo

First to see a complete demo, video protagonist is my family meow, Ahan said: "Ah, to face up, so shy ~ ~ ~ ~

http://demo.liuxianan.com/2016/01/09/html5-video-resize/

The width and height ratio becomes bigger

Keep the width unchanged, adjust the Rotatex can achieve a small height, that is, the width and height ratio becomes larger. Look at the picture below:

For example, if the original video resolution is 640*320 (16:9), I want to adjust it to 16:7, which is 640*280, then:

cosθ= new height/Old height = 280/360

Use JS to calculate angle (unit is deg):

var rotate = (Math.acos (280/360) *180/math.pi). toFixed (2); New height/Old height

The width and height ratio becomes smaller

When the ratio of width to height is reduced, the width is smaller by adjusting the rotatey, i.e. the aspect ratio becomes smaller.

For example, if the original video resolution is 640*320 (16:9), I want to adjust it to 4:3, which is 480*320, then:

cosθ= New width/Old width = 480/640

Use JS to calculate angle (unit is deg):

var rotate = (Math.acos (480/640) *180/math.pi). toFixed (2); New width/Old width

Summarize

In summary, with these 2 methods can achieve any proportion of video stretching, but the deformation process needs to pay attention to the location may find changes.

Report

Attach the demo selected in the previous demo:

<! DOCTYPE html>