Làm cách nào để điền phần tử video có hình ảnh áp phích ngay cả khi hình ảnh áp phích có tỷ lệ khung hình khác với phần tử video của nó?

Question

Vì nó đứng ngay bây giờ, điều này chỉ được thử nghiệm trong WebKit.

Khi hình ảnh áp phích được đặt trên thành phần <video> sử dụng thuộc tính poster, hình ảnh này hiển thị trước khi người dùng phát video (hành vi mặc định). Tuy nhiên, nếu hình ảnh áp phích có tỷ lệ khung hình khác với tỷ lệ khung hình khác nhau của phần tử <video> được đặt, khoảng trắng (hoặc có thể là không gian đen) được nhìn thấy ở hai bên của hình ảnh (trái và phải hoặc trên và dưới) và hình ảnh là trung tâm (cũng là hành vi mặc định).

Tôi muốn biết cách chia tỷ lệ hình ảnh này (tốt nhất là trong CSS) sao cho nó lấp đầy phần tử video, tương tự như sử dụng giá trị CSS3 background-size: cover;.

Vẫn còn nhầm lẫn? Có lẽ JSFiddle này sẽ giúp giải thích: http://jsfiddle.net/jonnymilano/2w2CE/

Tôi cũng sẽ quan tâm đến câu trả lời đã ép hình ảnh vào vùng chứa video, làm cong chiều cao và/hoặc chiều rộng của nó để vừa với kích thước của vùng chứa video. Tuy nhiên, câu trả lời này sẽ chỉ giải quyết một phần vấn đề của tôi.

Answer 1

Câu hỏi này khiến tôi suy nghĩ và jsfiddle của bạn hữu ích trong việc giải quyết vấn đề này (mặc dù không dành cho IE vì nó không thực hiện đúng hình ảnh áp phích).

Về cơ bản kết hợp những gì bạn đã đăng, đặt hình ảnh áp phích yêu cầu làm hình nền của phần tử video và chỉ định hình ảnh trong suốt 2x2 làm hình ảnh áp phích thực tế.

ví dụ:

<video controls poster="transparent.png"> 
    <source src="video.mp4" type="video/mp4"> 
    <source src="video.webm" type="video/webm"> 
</video> 

và

video { 
    width:305px; 
    height:160px; 
    background:transparent url('poster.jpg') no-repeat 0 0; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    background-size:cover; 
} 

tôi đã viết thêm một chút về nó ở HTML5 Video and Background Images.