Bạn có thể hiển thị HTML5 <video> làm nền toàn màn hình không?

Question

Làm cách nào để hiển thị HTML5 <video> làm nền toàn màn hình cho trang web của bạn? Tương tự như Flash này giới thiệu trang web ...

http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617

Answer 1

Sử dụng position:fixed trên video, đặt nó là 100% chiều rộng/chiều cao, và đặt một âm z-index vào nó để nó xuất hiện đằng sau tất cả mọi thứ.

Nếu bạn xem VideoJS, các điều khiển chỉ là các phần tử html nằm trên đầu video, sử dụng chỉ mục z để đảm bảo chúng ở trên.

HTML

<video id="video_background" src="video.mp4" autoplay> 

(Thêm nguồn webm và ogg để hỗ trợ nhiều trình duyệt)

CSS

#video_background { 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: -1000; 
} 

Nó sẽ làm việc trong hầu hết các trình duyệt HTML5, nhưng có lẽ không phải iPhone/iPad , nơi video cần được kích hoạt và không thích các phần tử trên video.

Answer 2

Chỉ cần nhận xét về điều này - Tôi đã sử dụng video HTML5 cho nền toàn màn hình và nó hoạt động - nhưng hãy đảm bảo sử dụng Chiều cao: 100% và chiều rộng: tự động hoặc cách khác - để đảm bảo bạn giữ tỷ lệ khung hình.

Đối với Ipad, bạn có thể (rõ ràng) làm điều này, bằng cách ẩn và sau đó buộc sự kiện nhấp phải kích hoạt và chức năng của sự kiện nhấp sẽ khởi động Tải/Phát().

P.s - điều này không yêu cầu bất kỳ plugin và có thể được thực hiện với JS tối thiểu - Nếu bạn đang nhắm mục tiêu bất kỳ thiết bị di động (tôi giả sử bạn có thể ..) tránh xa bất kỳ khung như vậy là con đường phía trước.

Answer 3

Tôi có thể hơi muộn để trả lời câu hỏi này nhưng điều này sẽ hữu ích cho những người mới tìm kiếm câu trả lời này.

Câu trả lời ở trên là tốt, nhưng để có nền video hoàn hảo, bạn phải kiểm tra tỷ lệ khung hình khi video có thể bị cắt hoặc canvas xung quanh bị biến dạng khi thay đổi kích thước màn hình hoặc sử dụng trên các kích thước màn hình khác nhau.

Tôi đã gặp sự cố này cách đây không lâu và tôi đã tìm thấy giải pháp bằng cách sử dụng truy vấn phương tiện.

Đây là một hướng dẫn mà tôi đã viết về cách tạo một Fullscreen Video Background with only CSS

tôi sẽ thêm mã ở đây cũng như:

HTML:

<div class="videoBgWrapper"> 
    <video loop muted autoplay poster="img/videoframe.jpg" class="videoBg"> 
     <source src="videosfolder/video.webm" type="video/webm"> 
     <source src="videosfolder/video.mp4" type="video/mp4"> 
     <source src="videosfolder/video.ogv" type="video/ogg"> 
    </video> 
</div> 

CSS:

.videoBgWrapper { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    overflow: hidden; 
    z-index: -100; 
} 
.videoBg{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

@media (min-aspect-ratio: 16/9) { 
    .videoBg{ 
    width: 100%; 
    height: auto; 
    } 
} 
@media (max-aspect-ratio: 16/9) { 
    .videoBg { 
    width: auto; 
    height: 100%; 
    } 
} 

Tôi hy vọng bạn thấy nó hữu ích.