Gắn video background cho website của bạn với jQuery Vide

GIÓI THIỆU

Cách thông thường nhất khi cần thiết kế website một cách ấn tượng là sử dụng hình ảnh, màu sắc, đi kèm với các hiệu ứng chuyển động. Tuy nhiên, với HTML5, bạn có nhiều hơn thế, Vide là một plugin của jQuery giúp bạn nhúng video vào website của mình một cách dễ dàng, thậm chí bạn có thể nhúng Video làm nền cho website của mình thay vì những hình ảnh tĩnh

TÍNH NĂNG

Vide cung cấp nhiều tính năng, dễ dàng sử dụng:

Hỗ trợ hầu hết các trình duyệt
Hỗ trợ tạo video nền cho trang, hoặc cho một phần của trang
Hỗ trợ các thuộc tính HTML5
Kích thước rất nhỏ (~3.6kb minified)

HƯỚNG DẪN TÍCH HỢP

Sau đây mình sẽ hướng dẫn các bạn tích hợp Vide vào website của mình, ở đây mình sẽ sử dụng Video làm hình nền cho website

CÁCH 1: Sử dụng JS để kích hoạt

1. Thêm vào đầu website của bạn (trong <head></head>)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://vodkabears.github.io/vide/js/jquery.vide.min.js"></script>

2. Chỉnh CSS để full màn hình

html,body {
  height: 100%;
}

3. Gọi hàm JS để kích hoạt Video

$("body").vide("http://vodkabears.github.io/vide/video/ocean.mp4",{
    volume: 1,
    playbackRate: 1,
    muted: true,
    loop: true,
    autoplay: true,
    position: "50% 50%" // Alignment
});

3. Demo

See the Pen Background video with Vide by Thanh Nguyen (@genievn) on CodePen.

CÁCH 2: Sử dụng thuộc tính HTML5

1. Sửa lại thẻ BODY

<body data-vide-bg="video/ocean">

Vide sẽ kiểm tra thư mục video (đường dân tương đối với trang hiện tại của bạn), và chọn file "ocean.mp4" (hoặc các định dạng khác như "ocean.webm" "ocean.ogv" để tương tích với các trình duyệt khác nhau), trong thư mục này, bạn có thể thêm file ảnh "ocean.jpg" hoặc "ocean.png" hoặc "ocean.gif" để làm ảnh Poster cho video

2. Chỉnh CSS full màn hình

html,body {
  height: 100%;
}

3. Thêm vào cuối website của bạn

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://vodkabears.github.io/vide/js/jquery.vide.min.js"></script>

Recent Post