Âm thanh và Video

Như bạn đã tìm hiểu trong mô-đun hình ảnh, HTML cho phép nhúng nội dung nghe nhìn vào một trang web. Trong phần này, chúng tôi sẽ tìm hiểu về tệp âm thanh và video, bao gồm cả cách nhúng tệp, các chế độ điều khiển của người dùng, việc cung cấp phần giữ chỗ hình ảnh tĩnh cho video của bạn và các phương pháp hay nhất, bao gồm cả việc cho phép người dùng truy cập vào tệp âm thanh và video.

<audio> và <video>

Bạn có thể dùng phần tử <video> và <audio> để trực tiếp nhúng trình phát nội dung đa phương tiện bằng thuộc tính src hoặc dùng làm phần tử vùng chứa cho một loạt phần tử <source>, mỗi phần tử cung cấp một tệp đề xuất src. Mặc dù bạn có thể dùng <video> để nhúng tệp âm thanh, nhưng tốt nhất là bạn nên dùng phần tử <audio> để nhúng các tệp âm thanh.

Thẻ mở <video> và <audio> có thể chứa một số thuộc tính khác (bao gồm controls, autoplay, loop, mute, preload) và các thuộc tính chung. Phần tử <video> cũng hỗ trợ các thuộc tính height, width và poster.

<video src="videos/machines.webm" poster="images/machine.jpg" controls>
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Ví dụ <video> này có một nguồn duy nhất có thuộc tính src liên kết đến nguồn video đó. Thuộc tính poster cung cấp hình ảnh để hiển thị khi video tải. Cuối cùng, thuộc tính controls cung cấp các chế độ điều khiển video của người dùng.

Nội dung dự phòng được bao gồm giữa các thẻ mở và đóng. Nếu tác nhân người dùng không hỗ trợ <video> (hoặc <audio> thì nội dung này sẽ xuất hiện. Bạn cần có thẻ đóng </video>, ngay cả khi không có nội dung giữa hai thẻ (nhưng phải luôn có nội dung dự phòng , đúng không?).

Nếu không có thuộc tính src nào trong thẻ mở <video> hoặc <audio>, hãy thêm một hoặc nhiều phần tử <source>, mỗi phần tử có thuộc tính src cho một tệp nội dung nghe nhìn. Ví dụ sau đây cho thấy 3 lựa chọn tệp nội dung nghe nhìn, nội dung dự phòng cũng như phụ đề tiếng Anh và tiếng Pháp ở giữa các thẻ mở và đóng.

<video controls poster="images/machine.jpg">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
  <track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
  <track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Mỗi thành phần con <source> bao gồm một thuộc tính src trỏ đến tài nguyên và thuộc tính type thông báo cho trình duyệt về loại nội dung đa phương tiện của tệp được liên kết. Điều này ngăn trình duyệt tìm nạp các tệp nội dung nghe nhìn mà trình duyệt sẽ không giải mã được.

Trong thuộc tính type, bạn có thể thêm tham số codecs. Tham số này sẽ chỉ định chính xác cách mã hoá tài nguyên. Các bộ mã hoá và giải mã cung cấp cho bạn một cách để bao gồm các tính năng tối ưu hoá nội dung nghe nhìn chưa được hỗ trợ trong mọi trình duyệt. Bộ mã hoá và giải mã được phân tách với loại nội dung đa phương tiện bằng dấu chấm phẩy. Ví dụ: bộ mã hoá và giải mã có thể được viết bằng cú pháp trực quan, chẳng hạn như <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">. Cú pháp này cho biết rằng các tệp WebM chứa video VP8 và âm thanh vorbis. Các bộ mã hoá và giải mã cũng có thể khó giải mã hơn, chẳng hạn như <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> cho biết rằng bộ mã hoá MP4 là Hồ sơ chính lập trình video nâng cao cấp 4.2. Việc giải thích về cú pháp này nằm ngoài phạm vi của bài học này. Nếu bạn muốn tìm hiểu thêm, Jake Archibald có một bài đăng giải thích cách xác định tham số bộ mã hoá và giải mã cho video AV1.

Theo mặc định, khi hiển thị video, khung hình đầu tiên của video sẽ hiển thị dưới dạng cảnh quay tĩnh khi có sẵn. Đây là thứ mà bạn có thể kiểm soát. Thuộc tính poster cho phép nguồn của hình ảnh hiển thị khi video đang được tải xuống và cho đến khi video được phát. Nếu video phát và sau đó tạm dừng, áp phích sẽ không được hiển thị lại.

Hãy nhớ xác định tỷ lệ khung hình của video, vì khi video tải, sự khác biệt về kích thước giữa áp phích và video sẽ dẫn đến việc chỉnh lại luồng và vẽ lại.

Luôn thêm thuộc tính boolean controls. Điều này giúp người dùng thấy được các nút điều khiển, giúp người dùng có thể kiểm soát mức âm thanh, tắt tiếng hoàn toàn âm thanh và mở rộng video ra toàn màn hình. Việc bỏ qua controls sẽ tạo ra trải nghiệm người dùng kém, đặc biệt là khi bạn thêm thuộc tính boolean autoplay. Xin lưu ý rằng một số trình duyệt sẽ không chú ý đến lệnh thuộc tính autoplay nếu thuộc tính boolean muted bị bỏ qua vì việc tự động phát tệp nội dung nghe nhìn thường là trải nghiệm không tốt cho người dùng, ngay cả khi tắt tiếng và có các chế độ điều khiển hiển thị.

Bản nhạc

Giữa các thẻ mở và thẻ đóng bắt buộc của cả âm thanh và video, hãy thêm một hoặc nhiều phần tử <track> để chỉ định các bản văn bản được tính giờ. Ví dụ sau đây có hai tệp <track> cung cấp phụ đề văn bản theo thời gian bằng cả tiếng Anh và tiếng Pháp.

<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />

Các tệp bản nhạc được chỉ định trong thuộc tính src phải ở định dạng WebVTT (.vtt). Các tệp phải nằm trên cùng một miền với tài liệu HTML, trừ khi thuộc tính crossorigin được bao gồm.

Có 5 giá trị liệt kê cho thuộc tính kind của bản nhạc: subtitles, captions, descriptions, chapters và metadata khác.

Thêm subtitles cùng với thuộc tính srclang để chép lời và dịch hội thoại. Giá trị của mỗi thuộc tính label hiển thị dưới dạng một tuỳ chọn cho người dùng. Nội dung của lựa chọn VTT đã chọn sẽ xuất hiện trên video đó. Bạn có thể tạo kiểu cho giao diện phụ đề bằng cách nhắm mục tiêu ::cue/ ::cue().

Bạn nên dành riêng giá trị kind="caption" cho bản chép lời và bản dịch có chứa hiệu ứng âm thanh và các thông tin âm thanh có liên quan khác. Nội dung này không chỉ dành cho người xem khiếm thính. Có thể người dùng không tìm thấy tai nghe của mình nên họ đã bật phụ đề. Hoặc có thể họ không nắm bắt được vài ý cuối cùng của podcast yêu thích, nên họ muốn đọc bản chép lời để xác nhận hiểu biết của mình. Việc có những cách khác để truy cập vào nội dung âm thanh và video vừa quan trọng và thuận tiện.

kind="description" dành cho phần mô tả văn bản của nội dung hình ảnh trong video đối với những người dùng không xem được video, cho dù họ đang sử dụng một hệ thống không có màn hình như Google Home hay Alexa, hoặc khi họ bị khiếm thị.

Cung cấp phụ đề bằng cách sử dụng định dạng WebVTT giúp người khiếm thính có thể xem video. Hãy nhớ rằng khuyết tật là sự không phù hợp giữa một người và môi trường hiện tại của họ. Khiếm thính có thể là do người dùng ở trong môi trường ồn ào, loa bị lỗi hoặc tai nghe bị hỏng, hoặc người dùng bị suy giảm thính lực hoặc bị khiếm thính. Việc đảm bảo nội dung của bạn dễ tiếp cận sẽ giúp ích cho nhiều người hơn bạn nghĩ và cũng sẽ giúp ích cho mọi người.

Những điều cần cân nhắc đối với video trong nền

Nhóm tiếp thị hoặc thiết kế có thể muốn trang web của bạn thêm một video nền. Nhìn chung, điều này có nghĩa là họ muốn video lặp lại, tự động phát, ở chế độ tắt tiếng và không có nút điều khiển. HTML có thể có dạng như sau:

<video autoplay loop muted poster="images/machine.jpg" role="none">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
</video>

Không thể truy cập vào video nền. Nội dung không được truyền tải qua video nền nếu người dùng không có toàn quyền kiểm soát việc phát và quyền truy cập vào tất cả phụ đề. Vì chỉ mang tính chất trang trí, nên video này có vai trò ARIA của none và bỏ qua mọi nội dung dự phòng. Để cải thiện hiệu suất của video luôn tắt tiếng, hãy xoá bản âm thanh khỏi nguồn nội dung nghe nhìn của bạn.

Nếu video của bạn phát trong 5 giây trở xuống, nguyên tắc hỗ trợ tiếp cận không yêu cầu cơ chế tạm dừng. Tuy nhiên, mọi nội dung có thuộc tính boolean loop sẽ lặp lại vĩnh viễn theo mặc định, vượt quá giới hạn 5 giây này (hoặc bất kỳ giới hạn thời gian nào khác). Để có trải nghiệm người dùng tốt, hãy luôn bao gồm phương thức tạm dừng video. Bạn có thể dễ dàng thực hiện việc này bằng cách thêm controls.

Trình điều khiển nội dung nghe nhìn tuỳ chỉnh

Để hiển thị các nút điều khiển âm thanh hoặc video tuỳ chỉnh thay vì các trình điều khiển tích hợp sẵn trong trình duyệt, hãy thêm thuộc tính controls. Sau đó, hãy sử dụng JavaScript để thêm các chế độ điều khiển nội dung đa phương tiện tuỳ chỉnh và xoá thuộc tính điều khiển. Ví dụ: bạn có thể thêm <button> để bật/tắt trạng thái phát của tệp âm thanh.

<button id="playPause" aria-controls="idOfAudio"
  data-pause-text="Pause audio"
  data-play-text="Play audio">Pause audio</button>

Ví dụ này bao gồm một nút có thuộc tính dataset chứa văn bản sẽ được cập nhật khi khách truy cập chuyển đổi giữa trạng thái phát và tạm dừng. Thuộc tính aria-controls đi kèm với id của phần tử do nút điều khiển; trong trường hợp này là âm thanh. Mỗi nút kiểm soát âm thanh đều có một trình xử lý sự kiện.

Để tạo các chế độ điều khiển tuỳ chỉnh, hãy sử dụng HTMLMediaElement.play() và HTMLMediaElement.pause(). Khi bật/tắt trạng thái phát, bạn cũng có thể chuyển đổi văn bản của nút:

const pauseButton = document.getElementById('playPause');

pauseButton.addEventListener("click", pauseAndPlay, false);

function pauseAndPlay() {
  console.log(this);
  const media = document.getElementById(this.getAttribute('aria-controls'));

  if (media.paused) {
    media.play();
    this.innerText = this.dataset.pauseText;
  } else {
    media.pause();
    this.innerText = this.dataset.playText;
  }
}

Bằng cách thêm thuộc tính controls, người dùng có cách kiểm soát âm thanh (hoặc video) ngay cả khi JavaScript không hoạt động. Chỉ xoá thuộc tính điều khiển sau khi nút thay thế đã được tạo.

document.querySelector('[aria-controls]').removeAttribute('controls');

Luôn thêm các chế độ điều khiển bên ngoài khi người dùng không thể truy cập các nút điều khiển, chẳng hạn như với những video trong nền có chế độ điều khiển bị ẩn phía sau nội dung trang web. Điều quan trọng là bạn phải hiểu rõ thông tin cơ bản của các yêu cầu về khả năng tiếp cận nội dung đa phương tiện để đáp ứng các nhu cầu khác nhau về môi trường và giác quan, bao gồm cả hàng triệu người bị suy giảm thính lực và suy giảm thị lực. Chúng ta vừa đề cập đến HTMLMediaElement, trong đó cung cấp một số thuộc tính, phương thức và sự kiện mà cả HTMLVideoElement và HTMLAudioElement kế thừa, trong đó HTMLMediaElement có thêm một số thuộc tính, phương thức và sự kiện của riêng nó. Có một số API Nội dung nghe nhìn khác, trong đó có API TextTrack. Bạn có thể sử dụng các API Media Capture và Livestream (Ghi lại nội dung nghe nhìn và phát trực tuyến) và MediaDevices để ghi âm từ micrô của người dùng hoặc ghi màn hình của người dùng. Web Audio API cho phép thao tác với nội dung âm thanh và phát trực tiếp đã ghi sẵn và đã ghi sẵn, lưu hoặc gửi âm thanh đến phần tử <audio>.

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về âm thanh và video.