Hướng dẫn tạo slideshow video bằng Javascript đơn giản cho website

Phan Thanh
Tháng Sáu 2, 2018 2 Bình luận 1588 Lượt xem

Notice: A non well formed numeric value encountered in /home/phantha1/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/phantha1/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/phantha1/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/phantha1/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/phantha1/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/phantha1/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Share26

26 Shares

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.

<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>

</div>

</div>

</div>

</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à:
1. .play-video: là khu vực chứa video đang chạy.
2. .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:

.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;
}

.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:

/* 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&amp;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&amp;showinfo=0&amp;autoplay=1");
	});
}

/* 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.

css html javascript slideshow video thủ thuật website

Các tin khác

2

Để lại bình luận

Đăng ký theo dõi

Mới nhất Cũ nhất Voted nhiều nhất

Người đăng ký

Thành Nguyên

bạn ơi, có code tự tạo slide ảnh cho blog post k bạn?

Tác giả

Phan Thanh

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

wpDiscuz

Hướng dẫn tạo slideshow video bằng Javascript đơn giản cho website

Các tin khác

2 Để lại bình luận

2

Để lại bình luận