×

Cách sử dụng thẻ <track> để thêm phụ đề cho video trong HTML

Avatar of admin
admin 0 Views

Việc thêm phụ đề vào video không chỉ giúp người khiếm thính tiếp cận nội dung một cách dễ dàng hơn mà còn giúp người xem hiểu rõ hơn khi âm thanh không rõ ràng hoặc khi đang xem video ở môi trường ồn ào. Thẻ <track> trong HTML chính là công cụ hữu ích cho mục đích này. Bài viết này sẽ hướng dẫn chi tiết cách sử dụng thẻ <track> để thêm phụ đề vào video trong HTML.

Giới Thiệu Về Thẻ <track>

Thẻ <track> là một phần của HTML5 và được sử dụng để nhúng các tệp phụ đề, chú thích hoặc các bản dịch cho video và audio. Thẻ này cần được đặt bên trong thẻ <video> hoặc <audio>. Nội dung của thẻ <track> không được hiển thị trực tiếp trong trình duyệt, mà thay vào đó trình duyệt sẽ tải tệp phụ đề tương ứng và hiển thị chúng kèm theo nội dung video hoặc audio.

Cú Pháp Thẻ <track>

Để thêm phụ đề vào video, bạn cần sử dụng thẻ <track> với các thuộc tính sau:

  • kind: Loại dữ liệu mà track cung cấp (subtitles, captions, descriptions, chapters, metadata).
  • src: Đường dẫn tới tệp phụ đề.
  • srclang: Ngôn ngữ của phụ đề.
  • label: Nhãn cho track, thường được sử dụng để mô tả ngôn ngữ hoặc nội dung.
  • default: Thuộc tính này sẽ tự động chọn track khi người dùng không chọn track nào khác.

Ví Dụ Minh Họa

Dưới đây là một ví dụ cụ thể về cách sử dụng thẻ <track> để thêm phụ đề vào video:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thêm Phụ Đề Cho Video</title>
</head>
<body>
    <video controls width="600">
        <source src="video.mp4" type="video/mp4">
        <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English" default>
        <track kind="subtitles" src="subtitles_vi.vtt" srclang="vi" label="Vietnamese">
        Trình duyệt của bạn không hỗ trợ thẻ video.
    </video>
</body>
</html>

Giải Thích Mã Nguồn

  1. Thẻ <video>: Bao gồm thuộc tính controls để hiển thị các nút điều khiển cơ bản như play, pause, volume. Thuộc tính width thiết lập độ rộng của video.

  2. Thẻ <source>: Định nghĩa nguồn của video với src chỉ đường dẫn đến tệp video và type xác định định dạng video.

  3. Thẻ <track>:

    • kind="subtitles": Cho biết track này là phụ đề.
    • src="subtitles_en.vtt": Đường dẫn tới tệp phụ đề.
    • srclang="en": Ngôn ngữ của phụ đề là Tiếng Anh.
    • label="English": Nhãn cho track, giúp người dùng biết đây là phụ đề tiếng Anh.
    • default: Thiết lập track này làm mặc định.

  4. Thông báo hỗ trợ: Nếu trình duyệt không hỗ trợ thẻ video, một thông điệp sẽ xuất hiện.

Tệp Phụ Đề .vtt

Tệp phụ đề thường có định dạng .vtt (WebVTT). Dưới đây là ví dụ về nội dung của tệp phụ đề:

WEBVTT

00:00:00.000 --> 00:00:05.000
Chào mừng bạn đến với video của chúng tôi.

00:00:05.000 --> 00:00:10.000
Hôm nay, chúng tôi sẽ tìm hiểu cách thêm phụ đề vào video.

Lợi Ích Của Việc Sử Dụng Thẻ <track>

  • Tiếp cận dễ dàng: Giúp người khiếm thính hoặc người không hiểu ngôn ngữ video tiếp cận nội dung.
  • SEO: Cải thiện khả năng tìm kiếm video khi các công cụ tìm kiếm có thể phân tích nội dung phụ đề.
  • Tiện lợi cho người xem: Người xem có thể dễ dàng bật/tắt phụ đề hoặc thay đổi ngôn ngữ phụ đề theo ý muốn.

Tóm Lại

Sử dụng thẻ <track> trong HTML để thêm phụ đề vào video không chỉ tăng cường tính tiếp cận mà còn cải thiện trải nghiệm người dùng. Bằng cách nào đó, bạn không chỉ cung cấp một công cụ hữu ích cho người xem mà còn góp phần nâng cao giá trị và tầm ảnh hưởng của nội dung video. Điều quan trọng là bạn phải đảm bảo rằng các tệp phụ đề được tạo đúng cách và thẻ <track> được đặt hợp lý trong mã HTML.

Comments

Bài viết liên quan