Tải video dần dần theo từng phần với Range Requests trong HTTP

Code Giza Data Tháng hai 19, 2023

Trong các ứng dụng web hiện đại, việc tải xuống video trực tuyến ngày càng trở nên phổ biến hơn bao giờ hết. Tuy nhiên, khi tải xuống video có kích thước lớn, việc phân mảnh và tải xuống dần dần theo từng phần là một giải pháp tối ưu để giảm thời gian tải và tránh tình trạng lag khi xem video. Trong bài viết này, chúng ta sẽ tìm hiểu về chức năng Range Requests trong HTTP để phân mảnh và tải video dần dần theo từng phần.

Range Requests là một tính năng của HTTP cho phép yêu cầu chỉ một phần của tài nguyên trên máy chủ thay vì yêu cầu toàn bộ tài nguyên. Tính năng này cho phép chúng ta phân mảnh các tệp lớn thành các phần nhỏ hơn và tải chúng dần dần theo từng phần. Điều này giúp giảm thời gian tải và tránh tình trạng lag khi xem video.

Sau đây là 1 ví dụ đơn giản

Html

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Example Video Page</title>
</head>
<body>
	<video controls>
		<source src="example.mp4" type="video/mp4">
	</video>
	<script src="script.js"></script>
</body>
</html>

JavaScript

var video = document.querySelector("video");

var request = new XMLHttpRequest();
request.open("GET", "example.mp4", true);
request.responseType = "blob";

request.onload = function() {
	if (request.status === 200) {
		var videoBlob = request.response;
		var rangeStart, rangeEnd;

		// nếu trình duyệt hỗ trợ Range Requests, tải về 1MB đầu tiên của video
		if (request.getResponseHeader("Accept-Ranges") === "bytes") {
			rangeStart = 0;
			rangeEnd = 1048576;
		} else {
			rangeStart = null;
			rangeEnd = null;
		}

		var fileReader = new FileReader();
		fileReader.onload = function() {
			video.src = URL.createObjectURL(fileReader.result);
		};
		fileReader.readAsDataURL(videoBlob.slice(rangeStart, rangeEnd));
	}
};

request.send();

Và nếu bạn muốn video auto play thì update code html như sau

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Example Video Page</title>
</head>
<body>
	<video controls autoplay>
		<source src="example.mp4" type="video/mp4">
	</video>
	<script src="script.js"></script>
</body>
</html>

Trong ví dụ này, ta sử dụng thư viện XMLHttpRequest để tạo yêu cầu tải video. Khi yêu cầu được phản hồi, ta kiểm tra xem trình duyệt có hỗ trợ Range Requests không bằng cách kiểm tra giá trị của header “Accept-Ranges”. Nếu trình duyệt hỗ trợ Range Requests, ta tải xuống chỉ 1MB đầu tiên của video bằng cách thiết lập giá trị cho biến rangeStart và rangeEnd. Sau đó, ta sử dụng đối tượng FileReader để đọc tệp và gán URL của tệp đó cho thuộc tính src của thẻ video.

Lưu ý rằng ví dụ này chỉ là một ví dụ đơn giản và không hoàn chỉnh. Để sử dụng Range Requests một cách hiệu quả, ta cần phải xác định kích thước của tệp video và tính toán các khoảng cụ thể để tải xuống.