Hướng dẫn tạo slideshow video bằng Javascript đơn giản cho website
Slideshow video khá là phổ biến trên nhiều website. Họ dùng để trình chiếu các video quảng cáo, du lịch hay các khoá học,… Tuy nghiên chúng ta luôn tò mò về cách mà họ đã tạo ra slideshow video ó là như thế nào. Vậy thì hôm nay mình xin làm một bài hướng dẫn các bạn tạo slideshow video đơn giản bằng Javascript chỉ với 3 bước đơn giản.
Bước 1: Chúng ta tiến hành tạo chia layout cho từng bộ phận của slideshow. Các bạn chèn đoạn code html vào website của mình. Mình sẽ giải thích nó ở dưới.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div class="slide-video"> <div class="play-video"> <iframe id="video" width="560" height="315" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> </div> <div class="slide"> <div class="all-video"> <div class="item"> <img class="thumbnail-vd" src="https://img.youtube.com/vi/fxnz1ouehqw/maxresdefault.jpg" id-video="fxnz1ouehqw"/> </div> <div class="item"> <img class="thumbnail-vd" src="https://img.youtube.com/vi/oAS8vzr3SxI/maxresdefault.jpg" id-video="oAS8vzr3SxI" /> </div> <div class="item"> <img class="thumbnail-vd" src="https://img.youtube.com/vi/hibIxiZQgJ8/maxresdefault.jpg" id-video="hibIxiZQgJ8" /> </div> <div class="item"> <img class="thumbnail-vd" src="https://img.youtube.com/vi/vG_4FIsH5IY/maxresdefault.jpg" id-video="vG_4FIsH5IY"/> </div> <div class="item"> <img class="thumbnail-vd" src="https://img.youtube.com/vi/gyCqfJAnkJc/maxresdefault.jpg" id-video="gyCqfJAnkJc"/> </div> <div class="item"> <img class="thumbnail-vd" src="https://img.youtube.com/vi/Obs5rzZu540/maxresdefault.jpg" id-video="Obs5rzZu540"/> </div> </div> </div> </div> |
Mình sẽ giải thích sơ qua cho các bạn hiểu:
- Đầu tiên là layout bao ngoài cùng .slide-video nó sẽ bao toàn bộ tất cả các layout con của slideshow.
- Trong .slide-video sẽ gồm 2 bộ phận chính đó là:
- .play-video: là khu vực chứa video đang chạy.
- .slide: chứa danh sách các video nằm trong khu vực để người dùng lựa chọn
- Trong phần .item là layout chứa hình ảnh thumbnail của video từ Youtube. Đường link này có dạng: “https://img.youtube.com/vi/<id video youtube>/maxresdefault.jpg“
Bước 2: Chúng ta sẽ thêm style cho html ở trên để dễ dàng hình dung. Đây là code css:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.slide-video { height: 425px; width: 580px; margin: 10px auto; background: #000; padding: 10px; } .play-video { box-sizing: border-box; width: 580px; height: 335px; } .slide { position: relative; width: 100%; height: 90px; overflow-x: auto; } .all-video { position: absolute; width: 745px; } .item { width: 120px; max-height: 67.5px; overflow: hidden; float: left; } .item+.item { margin-left: 5px; } .thumbnail-vd { width: 120px; height: auto; cursor: pointer; } .thumbnail-vd:hover { background: #000; opacity: 0.2; } |
Đây là giao diện hoàn chỉnh của slideshow:
Bước 3: Cuối cùng là mình sẽ viểt Javascript cho slide trên hoạt động được:
|
1 2 3 4 5 6 7 8 9 10 11 |
/* Chèn link video đầu tiên hay mặc định khi mới load vào website */ document.getElementById("video").setAttribute("src", "https://www.youtube.com/embed/99BK0ctSkl4?rel=0&showinfo=0"); /* xử lý sự kiện khi click chọn video bất kì dưới danh sách video */ var btn = document.getElementsByClassName("thumbnail-vd"); for(i = 0; i < btn.length; i++){ btn[i].addEventListener("click", function(){ var id = this.getAttribute("id-video"); //lấy id của video từ tagname id-video của thẻ đang được click /*thay link video mới vào vị trí show video ở trên */ document.getElementById("video").setAttribute("src", "https://www.youtube.com/embed/"+id+"?rel=0&showinfo=0&autoplay=1"); }); } |
Đây là thành quả cuối cùng của chúng ta. Chúc các bạn thành công.
bạn ơi, có code tự tạo slide ảnh cho blog post k bạn?
Bạn có thể tạo slide ảnh cho blog tương tự với video nhé. Thay video bằng thẻ ảnh là ok