Share Sử dụng video làm background với thư viện bideo.js

filiallion

Administrator
Staff member
Administrator
Messages
293
Points
10
Language
Tiếng Việt
Trong thiết kế website, việc sử dụng hình ảnh làm background cho một thành phần nào đó hoặc toàn bộ website là thường xuyên. Với phong cách thiết kế hiện đại hiện nay, các website còn được sáng tạo để sử dụng video làm background, tạo ra giao diện sinh động hơn rất nhiều so với sử dụng hình ảnh. Mặc dù việc chèn video vào background không quá khó nhưng để làm tốt cũng không phải là đơn giản, nhất là đối với các bạn chưa có nhiều kinh nghiệm về HTML, CSS. Với thư viện bideo.js thì việc chèn video vào background lại trở nên vô cùng đơn giản chỉ với vài thao tác mã lệnh là các bạn đã có thể thực hiện thành công. Không những thế, thư viện bideo.js còn hỗ trợ khả năng responsive, giúp video có thể hiển thị tốt trên các thiết bị từ máy tính, máy tính bảng cho đến điện thoại di động.

Các bạn có thể tải thư viện bideo.js tại địa chỉ https://github.com/rishabhp/bideo.js và tích hợp vào website với dòng mã lệnh HTML như sau:
HTML:
<script src="path/to/bideo.js"></script>
Bây giờ các bạn thử tạo một thành phần và sử dụng video làm nền cho nó như ví dụ sau:
HTML:
<div class="container">
    <video id="bideo" loop></video>
    <p>Content</p>
</div>
Các bạn cài đặt thư viện bideo.js như sau:
JavaScript:
(function() {
    //Khai báo đối tượng bideo
    var bideo = new Bideo();
    
    //Cài đặt bideo
    bideo.init({
        videoEl: document.querySelector('#bideo'),
        container: document.querySelector('body'),
        resize: true,
        isMobile: window.matchMedia('(max-width: 768px)').matches,
        src: [{
            src: 'path/to/night.mp4',
            type: 'video/mp4'
        }, {
            src: 'path/to/night.webm',
            type: 'video/webm;codecs="vp8, vorbis"'
        }]
    });
}());
Trên đây chỉ là một ví dụ đơn giản để các bạn tham khảo.
 
Top