Can HTML5 video be stretched to achieve adaptive width?

Once upon a time, there was a demand for video scaling in the project, but I found this seemingly ordinary demand and searched the whole network without finding a solution. Because forcibly setting the width and height of the video label will only stretch the display area of the video, but the video inside still keeps the original proportion, and it is useless to adjust it:

Because when I stretch horizontally:

When I stretch longitudinally:

2016-09-211:15: 40 update:

Thanks to @RileyRen for reminding me that there is an attribute suitable for objects. Set it to fill and meet the demand, and the tears will flow. This article should be regarded as a joke. Hey, but you can see my cat's debut.

& ltstyle & gt video {

Object fit: filling;

Width: 800px

Height: 320px} & lt/style & gt；; & lth 1 & gt； Test video scaling:

However, the compatibility of this attribute is not very good, IE is completely annihilated, and Android needs more than 4.4.3 to support it:

So my method still has some value, haha.

Solution 1

Some people will say, since you can't stretch the scale on the web page, why not just use the transcoding tool to stretch the scale of the video and then transcode it?

Yes, this is the first solution I mentioned, but it is no problem for a small number of videos. If there are many videos, it is unrealistic to transcode them all and upload them. I did do it at first, but later I found that there were other ways.

Solution 2

For example, realize video scaling with transformation. There are two situations: the aspect ratio increases and the aspect ratio decreases.

3. 1.？ A complete demonstration

Let's watch a complete demonstration first. The protagonist of the video is my cat. Miao said: Oh, I'm going to show my face, so shy ~ ~ ~

/20 16/0 1/09-html 5-video-resize/

3.2.？ The aspect ratio becomes larger.

Keeping the width unchanged and adjusting rotateX can reduce the height, that is, the ratio of width to height becomes larger. Look at the picture below:

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

Cos θ = new height/old height = 280/360

Use js to calculate the angle (in degrees):

var rotate =(Math . acos(280/360)* 180/Math。 Pi). toFixed(2)； //New Height/Old Height

3.3.？ The aspect ratio becomes smaller.

When the aspect ratio is reduced, the width can be reduced by adjusting the rotation angle according to the height, that is, the aspect ratio is reduced.

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

Cos θ = new width/old width = 480/640

Use js to calculate the angle (in degrees):

var rotate =(Math . acos(480/640)* 180/Math。 Pi). toFixed(2)； //New width/Old width

abstract

To sum up, through these two methods, we can achieve any proportion of video stretching, but we should pay attention to the position changes that may be found during the deformation process.

enclose herewith

Attach the presentation selected in the previous presentation:

& lt！ DOCTYPE html & gt& lthtml lang = " zh " & gt& lthead & gt

& ltmeta charset="utf-8 " >

& ltmeta name = " viewport " content = " width = device-width，initial-scale= 1.0 " >

< title > rotation scale simulation

& ltstyle type="text/css " >。 Content {

Location: absolute;

Width: 400px

Height: 300px

-WebKit- Angle of view: 400px

Angle of view: 400px

Left:100px;

top: 100 px； }. Packaging {

Location: absolute;

Width: 320px

Height: 240px

Transform:rotateY(-30 degrees) rotateX(0 degrees);

Border: solid color 2px # 000}.wrapper.rotate{

Transform:rotateY(-30 degrees) rotateX(50 degrees); }. Packaging: in {

Content: "";

Display: block;

Location: absolute;