Tôi muốn sử dụng video làm nền thay vì hình ảnh tự động kéo dài đến toàn bộ màn hình (nền).video dưới dạng nền của trang web? HTML 5
Tôi cũng muốn xoay video và hình ảnh .. để có video/hình ảnh ngẫu nhiên được hiển thị theo bất kỳ thứ tự nào.
Bạn cũng nên biết cách trì hoãn phát lại video để video chỉ phát sau 30 giây sau khi trang web được tải.
thx!
Đầu tiên, đánh dấu HTML của bạn trông như thế này:
<video id="awesome_video" src="first_video.mp4" autoplay />
Thứ hai, mã JavaScript của bạn sẽ trông như thế này:
<script type="text/javascript">
var index = 1,
playlist = ['first_video.mp4', 'second_video.mp4', 'third_video.mp4'],
video = document.getElementById('awesome_video');
video.addEventListener('ended', rotate_video, false);
function rotate_video() {
video.setAttribute('src', playlist[index]);
video.load();
index++;
if (index >= playlist.length) { index = 0; }
}
</script>
Và cuối cùng nhưng không kém, CSS của bạn:
#awesome_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Điều này sẽ tạo thành phần video trên trang của bạn bắt đầu phát video đầu tiên ngay lập tức, sau đó lặp lại s thông qua danh sách phát được xác định bởi biến JavaScript. Số dặm của bạn với CSS có thể thay đổi tùy thuộc vào CSS cho phần còn lại của trang web, nhưng chiều rộng/chiều cao 100% nên thực hiện trên trang cơ bản.
thx, nhưng mã toàn màn hình không thực sự hoạt động. nó chỉ hiển thị video ở kích thước ban đầu của nó ở góc trên bên trái và cũng làm cho phần còn lại của văn bản trên trang web biến mất! – Roland
Vâng, nếu bạn muốn toàn màn hình, sau đó phần còn lại của văn bản trên trang web rõ ràng sẽ biến mất.Đối với toàn màn hình không hoạt động, hãy thử đặt chiều cao và chiều rộng của phần tử video thành kích thước khung nhìn. Ví dụ: 'video.width = 1024; video.height = 768; ' –
Hãy xem câu trả lời của tôi ở dưới đây. Nó sẽ đưa vào tài khoản tất cả các màn hình :) – sydlawrence
tôi có thể có một giải pháp cho các video làm nền, kéo dài cho trình duyệt chiều rộng hoặc chiều cao, (nhưng đoạn video vẫn sẽ giữ nguyên tỷ lệ khía cạnh, couldnt tìm một giải pháp cho điều đó được nêu ra.):
Đặt video ngay sau thẻ body với style="width:100%;". bạt phải, đặt một "bodydummy" -tag:
<body>
<video id="bgVideo" autoplay poster="videos/poster.png">
<source src="videos/test-h264-640x368-highqual-winff.mp4" type="video/mp4"/>
<source src="videos/test-640x368-webmvp8-miro.webm" type="video/webm"/>
<source src="videos/test-640x368-theora-miro.ogv" type="video/ogg"/>
</video>
<img id="bgImg" src="videos/poster.png" />
<!-- This image stretches exactly to the browser width/height and lies behind the video-->
<div id="bodyDummy">
Đặt tất cả nội dung của bạn bên trong bodydummy -div và đặt z-chỉ số một cách chính xác trong CSS như thế này:
#bgImg{
position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 1;
width: 100%;
height: 100%;
}
#bgVideo{
position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 2;
width: 100%;
height: 100%;
}
#bodyDummy{
position: absolute;
top: 0;
left: 0;
z-index: 3;
overflow: auto;
width: 100%;
height: 100%;
}
Hy vọng tôi có thể Cứu giúp. Hãy cho tôi biết khi bạn có thể tìm thấy giải pháp cho video không duy trì tỷ lệ khung hình, vì vậy, nó có thể lấp đầy toàn bộ cửa sổ trình duyệt để chúng tôi không phải đặt một tỷ lệ.
Hãy xem jquery tôi videoBG Plugin
http://syddev.com/jquery.videoBG/
Thực hiện bất kỳ đoạn video HTML5 một nền trang web ... có một fallback hình ảnh cho các trình duyệt không hỗ trợ html5
Thật dễ dàng để sử dụng
Hãy cho tôi biết nếu bạn cần bất kỳ trợ giúp nào.
Cảm ơn bạn Sydlawrence! Tôi bắt đầu trong một cuốn sách HTML5 (Lawson và Sharp), sau đó đi đến web ... tìm kiếm ở khắp mọi nơi cho "video nền html5" và đọc qua vô số thông tin không đúng. Giải pháp của bạn làm việc như một sự quyến rũ. –
@sydlawrence tuyệt vời! Tôi đã thực hiện giải pháp của bạn. Tôi có một vấn đề mặc dù với hội nhập và đó là áp phích nhấp nháy trong một giây trước khi tải video - làm thế nào nó có thể được thực hiện để áp phích chỉ tải lên nếu không có khả năng tương thích với video html5? – willdanceforfun
hi syd, plugin của bạn hoạt động tốt, nhưng nó dường như không hoạt động trên firefox? sao có thể như thế được? Ở mọi nơi khác nó hoạt động – woony
Hãy xem xét rằng nhiều khách truy cập sẽ ghét tính năng này (tôi chủ động chặn điều này bằng cách chặn quảng cáo). Hơn nữa, video có thể làm hại người dùng trong hai trường hợp - trên kết nối được đo và khi xem trang trong phiên máy tính từ xa có thể trở nên không sử dụng được nếu băng thông tải lên thấp. –