Hướng dẫn stretch video html - kéo dài video html

Điều này sẽ không thay đổi tỷ lệ video của bạn nhưng loại bỏ các không gian 'không được lấp đầy' xấu xí ở phía trên và dưới hoặc hai bên của trình xem video của bạn nếu trình duyệt của bạn không hỗ trợ kiểu object-fit:cover.

Giả sử bạn có một trình xem trong trang là 500x281 (thay đổi kích thước thích hợp từ 1280x720). Nhưng đôi khi bạn có thể nhận được một video không được cân đối đúng với chính xác 16: 9, giả sử 1278x720 hoặc 320x176 như trong trường hợp của video 'Buck Bunny' trên trang W3C. Sẽ thật tuyệt nếu video lấp đầy container hoàn toàn và bạn không phải tạo một thùng chứa mới cho mỗi video được cân đối không đúng.

Cho một đoạn mã như:

Sẽ hiển thị một video với các đường màu đen hoặc trắng ở phía trên và dưới cùng tùy thuộc vào cách trình duyệt của bạn xử lý object-fit. Thêm JavaScript sau đây để kích thước kích thước chiều cao trên container của video làm cho các dòng đó biến mất bằng cách buộc bộ chứa video của bạn phải khớp với video, ít nhất là theo chiều dọc.

Chúng tôi chia chiều rộng hiện tại của container cho chiều rộng xác định của luồng video sau đó nhân với chiều cao xác định của luồng video. Điều đó dẫn đến chiều cao của container cần phải được buộc phải phù hợp nhất có thể.

Điều quan trọng là chiều cao và chiều rộng video được đặt làm thuộc tính trong HTML ngoài định nghĩa CSS.

Có ba định dạng video được hỗ trợ: MP4, WebM và OGG. Hỗ trợ trình duyệt cho các định dạng khác nhau là:

Trình duyệt

Webm

Thí dụ

& nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.
 
 
Your browser does not support the video tag.

Hãy tự mình thử »

OGG

Bờ rìa

VÂNG

Trình duyệt Chrome

Firefox

Cuộc đi săn

KHÔNG

Thí dụ

& nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.
 
 
Your browser does not support the video tag.

Hãy tự mình thử »

Opera Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

Video HTML - Các loại phương tiện

Thí dụ

& nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.
 
 
Your browser does not support the video tag.

Hãy tự mình thử »

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .

Định dạng video HTML

Có ba định dạng video được hỗ trợ: MP4, WebM và OGG.Hỗ trợ trình duyệt cho các định dạng khác nhau là:

Trình duyệt Chrome

Video/MP4

Webm

Video/Webm

OGG

Video/OGG

HTML Video - Phương thức, Thuộc tính và Sự kiện