Các phần tử <source> và <track>

8.1 Phần tử <source>

Các phần tử <source> và <track> đóng vai trò quan trọng trong HTML5, cung cấp hỗ trợ cho nhiều định dạng đa phương tiện và cải thiện khả năng truy cập của nội dung. Chúng ta hãy xem xét chi tiết hơn.

Phần tử <source> được sử dụng trong các phần tử như <audio>, <video>, và <picture> để chỉ ra các nguồn nội dung đa phương tiện khác nhau. Điều này cho phép trình duyệt chọn định dạng phù hợp nhất để phát, đảm bảo khả năng tương thích đa trình duyệt và hỗ trợ các thiết bị khác nhau.

Cú pháp

    
      <source src="URL" type="MIME-type">
    
  

Thuộc tính

• src: chỉ định đường dẫn đến tệp đa phương tiện
• type: chỉ định loại tệp và MIME-type của nó. Điều này giúp trình duyệt xác định xem nó có hỗ trợ định dạng này không

Ví dụ sử dụng:

Ví dụ 1: Bên trong phần tử <video>

Trong ví dụ này, trình duyệt sẽ cố gắng phát định dạng đầu tiên mà nó hỗ trợ.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.webm" type="video/webm">
        <source src="movie.ogv" type="video/ogg">
        Trình duyệt của bạn không hỗ trợ phát video.
      </video>
    
  

Ví dụ 2: Bên trong phần tử <audio>

    
      <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        Trình duyệt của bạn không hỗ trợ phát audio.
      </audio>
    
  

Ví dụ 3: Bên trong phần tử <picture>

    
      <picture>
        <source srcset="image-320w.jpg" media="(max-width: 320px)">
        <source srcset="image-640w.jpg" media="(max-width: 640px)">
        <source srcset="image-1280w.jpg" media="(max-width: 1280px)">
        <img src="image-1280w.jpg" alt="Ví dụ hình ảnh">
      <picture>
    
  

Lợi ích của việc sử dụng <source>

• Khả năng tương thích đa trình duyệt: cho phép chỉ định nhiều định dạng, đảm bảo phát trong các trình duyệt khác nhau
• Tối ưu hóa cho thiết bị: khả năng chỉ định các tệp khác nhau cho các thiết bị và điều kiện khác nhau

8.2 Phần tử <track>

Phần tử <track> được sử dụng để thêm các bản văn bản vào nội dung đa phương tiện, chẳng hạn như phụ đề, phụ đề cho người khiếm thính, mô tả, các chương và siêu dữ liệu. Nó nằm bên trong các phần tử <audio> hoặc <video>.

Cú pháp

    
      <track src="URL" kind="type" srclang="language" label="label">
    
  

Thuộc tính

1. src: chỉ định đường dẫn đến tệp bản văn bản.
2. kind: xác định loại bản văn bản. Giá trị có thể:
   • subtitles: phụ đề để dịch thoại
   • captions: phụ đề cho người khiếm thính, bao gồm mô tả âm thanh
   • descriptions: mô tả âm thanh cho người khiếm thị
   • chapters: phân chương cho điều hướng nội dung đa phương tiện
   • metadata: siêu dữ liệu có thể được sử dụng bởi JavaScript
3. srclang: xác định ngôn ngữ bản văn bản (ví dụ, en cho tiếng Anh, es cho tiếng Tây Ban Nha).
4. label: tên mô tả của bản văn bản, được hiển thị trong menu lựa chọn bản văn bản.
5. default: chỉ ra rằng bản văn bản này nên được bật theo mặc định

Ví dụ sử dụng:

Ví dụ 1: Phụ đề cho video

Trong ví dụ này, video có hai bản văn bản phụ đề: tiếng Anh và tiếng Tây Ban Nha. Người dùng có thể chọn bản văn bản cần thiết từ menu.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
        <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
        Trình duyệt của bạn không hỗ trợ phát video.
      </video>
    
  

Ví dụ 2: Phụ đề cho người khiếm thính

Cấu hình này thêm một bản văn bản phụ đề cho người khiếm thính bằng tiếng Anh.

    
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="captions" srclang="en" label="subtitles">
        Trình duyệt của bạn không hỗ trợ phát video.
      </video>
    
  

Lợi ích của việc sử dụng <track>

• Nâng cao khả năng truy cập: phụ đề và mô tả làm cho nội dung dễ truy cập hơn cho người khiếm thính, khiếm thị
• Hỗ trợ đa ngôn ngữ: có thể thêm phụ đề bằng nhiều ngôn ngữ khác nhau
• Thông tin bổ sung: các chương và siêu dữ liệu cho phép tổ chức và cấu trúc nội dung đa phương tiện

8.3 Định dạng tệp cho các bản văn bản

Các bản văn bản thường được lưu trong định dạng WebVTT (Web Video Text Tracks). Định dạng này được hầu hết các trình duyệt hiện đại hỗ trợ và dễ đọc cả máy móc và con người.

Ví dụ tệp WebVTT (subtitles_en.vtt)

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

      2
      00:00:05.000 --> 00:00:10.000
      Chúng tôi hy vọng bạn thấy điều này hữu ích và thú vị.
    
  

Ví dụ sử dụng tổng hợp các phần tử <source> và <track>

    
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Video với nhiều nguồn và bản văn bản</title>
        </head>
        <body>
          <h1>Ví dụ về video với nhiều nguồn và bản văn bản</h1>
          <video controls width="600" poster="posterimage.jpg">
            <source src="movie.mp4" type="video/mp4">
            <source src="movie.webm" type="video/webm">
            <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
            <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
            <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
            <track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="English Descriptions">
            Your browser does not support the video element.
          </video>
        </body>
      </html>
    
  

1

Nhiệm vụ

Frontend SELF VI, mức độ, bài học

Đã khóa

Video và nguồn

Video và nguồn

Mở

1

Nhiệm vụ

Frontend SELF VI, mức độ, bài học

Đã khóa

Video và phụ đề

Video và phụ đề

Mở