HTML - Trình phát video: Mang Động vào các Trang Web của Bạn

Xin chào, các bạn đang học phát triển web! Hôm nay, chúng ta sẽ nhảy vào thế giới đầyExciting của các trình phát video HTML. Nhớ lại khi các trang web chỉ có văn bản và hình ảnh tĩnh phải không? Đúng vậy, những ngày đó đã xa rồi! Bây giờ, chúng ta có thể nhúng nội dung video động trực tiếp vào các trang web của mình, làm cho chúng trở nên hấp dẫn và tương tác hơn. Hãy bắt đầu hành trình thú vị này!

HTML - Video Player

Trình phát video cục bộ HTML

Trình phát video HTML là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu trình phát video HTML là gì. Đây là một tính năng内置 của HTML5 cho phép chúng ta nhúng nội dung video trực tiếp vào các trang web của mình mà không cần dựa vào các插件 của bên thứ ba như Flash. Đúng là rất tuyệt phải không?

Cấu trúc cơ bản của trình phát video

Hãy bắt đầu với cấu trúc cơ bản nhất của trình phát video:

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Hãy phân tích điều này:

Thẻ <video> là bộ chứa chính cho trình phát video của chúng ta.
Các thuộc tính width và height đặt kích thước của trình phát.
Thuộc tính controls thêm các điều khiển phát, dừng và âm lượng vào trình phát.
Thẻ <source> chỉ định tệp video cần phát.
Văn bản trong thẻ <video> sẽ được hiển thị nếu trình duyệt không hỗ trợ video HTML5.

Thêm nhiều nguồn

Nhưng đợi đã, nếu một số trình duyệt không hỗ trợ MP4 thì sao? Đừng lo lắng! Chúng ta có thể thêm nhiều nguồn:

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Bằng cách này, nếu trình duyệt không hỗ trợ MP4, nó sẽ cố gắng phát tệp OGG thay thế.

Tự động phát và lặp lại

Muốn video của bạn bắt đầu phát tự động và lặp lại liên tục? Dưới đây là cách làm:

<video width="320" height="240" autoplay loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Thuộc tính autoplay làm cho video bắt đầu phát ngay khi sẵn sàng, trong khi loop làm cho nó重启 từ đầu khi kết thúc.

Ảnh bìa

Nếu chúng ta muốn hiển thị một hình ảnh trước khi video bắt đầu phát thì sao? Hãy sử dụng thuộc tính poster:

<video width="320" height="240" poster="movie_poster.jpg" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Điều này sẽ hiển thị hình ảnh "movie_poster.jpg" cho đến khi người dùng bắt đầu video.

Ghi màn hình

Bây giờ, hãy nâng cấp và nói về ghi màn hình. Đây là một tính năng nâng cao hơn cho phép chúng ta ghi và hiển thị luồng video trực tiếp từ màn hình của người dùng.

Ghi màn hình cơ bản

Dưới đây là một ví dụ cơ bản về cách thực hiện ghi màn hình:

<video id="screenCapture" autoplay></video>
<button id="startCapture">Bắt đầu Ghi Màn hình</button>

<script>
const video = document.getElementById('screenCapture');
const startButton = document.getElementById('startCapture');

startButton.addEventListener('click', async () => {
try {
const captureStream = await navigator.mediaDevices.getDisplayMedia();
video.srcObject = captureStream;
} catch (err) {
console.error("Lỗi: " + err);
}
});
</script>

Hãy phân tích điều này:

Chúng ta có một thẻ <video> để hiển thị màn hình được ghi.
Một nút để kích hoạt quá trình ghi màn hình.
Khi nút được nhấp, chúng ta sử dụng navigator.mediaDevices.getDisplayMedia() để yêu cầu quyền ghi màn hình và nhận luồng.
Sau đó, chúng ta đặt luồng này làm nguồn cho phần tử video của mình.

Xử lý lỗi và kết thúc luồng

Chúng ta cũng nên xử lý các lỗi tiềm ẩn và khi người dùng dừng chia sẻ màn hình:

<video id="screenCapture" autoplay></video>
<button id="startCapture">Bắt đầu Ghi Màn hình</button>

<script>
const video = document.getElementById('screenCapture');
const startButton = document.getElementById('startCapture');

startButton.addEventListener('click', async () => {
try {
const captureStream = await navigator.mediaDevices.getDisplayMedia();
video.srcObject = captureStream;

const track = captureStream.getVideoTracks()[0];
track.onended = () => {
video.srcObject = null;
console.log('Ghi màn hình kết thúc');
};
} catch (err) {
console.error("Lỗi: " + err);
}
});
</script>

Trong phiên bản nâng cao này:

Chúng ta lấy luồng video từ capture stream.
Chúng ta thêm một sự kiện onended vào track này.
Khi ghi màn hình kết thúc, chúng ta đặt srcObject của video thành null và ghi lại một tin nhắn.

Kết luận

Và thế là bạn đã có, các bạn! Chúng ta đã cùng nhau hành trình từ các trình phát video cơ bản đến các kỹ thuật ghi màn hình nâng cao. Nhớ rằng, chìa khóa để thành thạo các khái niệm này là thực hành. Hãy thử tích hợp video vào các trang web của bạn, thử nghiệm với các thuộc tính khác nhau, và đừng ngại lấn sâu vào các tính năng phức tạp như ghi màn hình.

Dưới đây là bảng tóm tắt các thuộc tính và phương thức chính mà chúng ta đã covered:

Thuộc tính/Phương thức	Mô tả
controls	Thêm các điều khiển video (phát, dừng, âm lượng)
autoplay	Bắt đầu phát video tự động
loop	Làm cho video重启 khi kết thúc
poster	Chỉ định một hình ảnh để hiển thị trước khi video phát
getDisplayMedia()	Yêu cầu quyền ghi màn hình và nhận luồng

Tiếp tục mã hóa, tiếp tục học, và sớm bạn sẽ tạo ra các trang web không chỉ cung cấp thông tin mà còn làm cho người truy cập vui vẻ và tương tác. Đến gặp lại, chúc các bạn mã hóa vui vẻ!

Credits: Image by storyset

Hướng Dẫn Trước:

HTML - Trình phát音频

Hướng Dẫn Tiếp Theo:

HTML - Bàn trình chiếu Web