HTML - Video Element

Chào mừng các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng nhau khám phá một trong những yếu tố thú vị nhất trong HTML5 - yếu tố video. Nhớ lại những ngày chúng ta từng phụ thuộc vào các plugin của bên thứ ba để xem video trực tuyến? Những ngày đó đã qua rồi, nhờ vào thẻ nhỏ gọn này. Hãy cùng nhau bắt đầu hành trình này và khai thác sức mạnh của yếu tố video trong HTML!

Cú pháp

Trước khi chúng ta bước vào phần thú vị, hãy bắt đầu với những điều cơ bản. Yếu tố video trong HTML có một cú pháp đơn giản và dễ nhớ:

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

Đây là hình thức cơ bản nhất của yếu tố video. Hãy phân tích nó:

• <video>: Đây là thẻ mở cho biết chúng ta đang nhúng một video.
• src="movie.mp4": Thuộc tính này chỉ định nguồn của tệp video của chúng ta.
• controls: Thuộc tính này thêm các控件 phát lại (chơi, dừng, âm lượng) vào máy phát video.
• Văn bản giữa thẻ mở và thẻ đóng sẽ được hiển thị nếu trình duyệt không hỗ trợ yếu tố video.

Bây giờ, bạn có thể đang nghĩ, "Đó là tất cả?" Thật ra, không phải! Có rất nhiều điều chúng ta có thể làm với yếu tố mạnh mẽ này. Hãy cùng khám phá thêm!

Ví dụ về Yếu tố Video HTML

Ví dụ 1: Nhúng Video Cơ bản

<video src="cute_kitten.mp4" controls width="320" height="240">
Rất tiếc, trình duyệt của bạn không hỗ trợ video nhúng.
</video>

Trong ví dụ này, chúng ta đã thêm các thuộc tính width và height để điều chỉnh kích thước của máy phát video. Đó giống như mua một chiếc TV - bạn được chọn kích thước bạn muốn!

Ví dụ 2: Nhiều Tệp Nguồn

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

Ở đây, mọi thứ trở nên thú vị! Chúng ta đã cung cấp nhiều nguồn video khác nhau sử dụng yếu tố <source>. Tại sao? Vì các trình duyệt khác nhau hỗ trợ các định dạng video khác nhau. Bằng cách cung cấp nhiều nguồn, chúng ta đang đảm bảo rằng video của chúng ta có thể phát trên càng nhiều trình duyệt càng tốt. Đó giống như mang theo nhiều loại đồ ăn đến một buổi tiệc - có thứ cho mọi người!

Ví dụ 3: Tự động Phát và Tắt Âm

<video src="background_video.mp4" autoplay muted loop>
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Ví dụ này giới thiệu ba thuộc tính mới:

• autoplay: Video sẽ bắt đầu phát ngay khi sẵn sàng.
• muted: Video sẽ phát mà không có âm thanh.
• loop: Video sẽ重启 khi kết thúc.

Combination này hoàn hảo cho các video nền trên các trang web. Đó giống như có một bộ phim câm phát lại liên tục nền cho trang web của bạn!

Ví dụ 4: Ảnh Bìa

<video src="movie_trailer.mp4" controls poster="movie_poster.jpg">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Thuộc tính poster cho phép bạn chỉ định một hình ảnh để hiển thị trong khi video đang tải xuống, hoặc cho đến khi người dùng nhấn nút phát. Đó giống như bìa của một đĩa DVD - nó cho người xem một cái nhìn trước về những gì họ即将 xem!

Hỗ trợ của Trình duyệt cho Các Định dạng Video Khác nhau

Bây giờ, hãy nói về hỗ trợ của trình duyệt. Không phải tất cả các trình duyệt đều hỗ trợ tất cả các định dạng video, đó là lý do tại sao việc cung cấp nhiều nguồn quan trọng. Dưới đây là bảng handy hiển thị các trình duyệt hỗ trợ các định dạng nào:

Định dạng Video	Chrome	Firefox	Safari	Edge	Internet Explorer
MP4	Có	Có	Có	Có	Có (9+)
WebM	Có	Có	Không	Có	Không
Ogg	Có	Có	Không	Không	Không

Như bạn có thể thấy, MP4 là định dạng được hỗ trợ rộng rãi nhất. Tuy nhiên, việc bao gồm các phiên bản WebM và Ogg của video của bạn có thể đảm bảo khả năng tương thích với các trình duyệt cũ hơn.

Các Practices Tốt

1. Luôn bao gồm thuộc tính controls除非你有充分的理由不这样做。Người dùng đánh giá cao việc có thể kiểm soát việc phát video.

2. Cung cấp nhiều tệp nguồn ở các định dạng khác nhau để đảm bảo tương thích tối đa với trình duyệt.

3. Sử dụng thuộc tính poster để cho người dùng một cái nhìn trước về video.

4. Đừng quên autoplay. Trong khi nó có thể hữu ích cho các video nền, nó có thể gây khó chịu cho người dùng nếu sử dụng quá mức.

5. Luôn bao gồm nội dung thay thế giữa các thẻ <video> cho các trình duyệt không hỗ trợ yếu tố này.

Tóm lại, yếu tố video trong HTML là một công cụ mạnh mẽ cho phép chúng ta dễ dàng nhúng video vào các trang web của mình mà không cần phụ thuộc vào các plugin của bên thứ ba. Nó linh hoạt, được hỗ trợ rộng rãi và dễ sử dụng.

Nhớ rằng, chìa khóa để thành thạo phát triển web là thực hành. Vậy hãy đi nào, thử nhúng một số 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à xem điều gì phù hợp nhất với nhu cầu của bạn. Ai biết được? Bạn có thể là người kế tiếp lớn trong lĩnh vực phát trực tuyến video trên web!

Chúc các bạn may mắn trong việc lập trình, các pháp sư web tương lai!

Credits: Image by storyset