Â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 trang web. Trong phần này, chúng ta sẽ xem xét các tệp âm thanh và video, bao gồm cách nhúng các tệp đó, các chế độ kiểm soát của người dùng, cách cung cấp phần giữ chỗ hình ảnh tĩnh cho video và các phương pháp hay nhất, bao gồm cả việc giúp người dùng tiếp cận được các tệp âm thanh và video.

<audio> và <video>

Bạn có thể dùng các phần tử <video> và <audio> để nhúng trực tiếp trình phát đa phương tiện bằng thuộc tính src hoặc có thể 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 đề xuất tệp src. Mặc dù bạn có thể dùng <video> để nhúng tệp âm thanh, nhưng phần tử <audio> sẽ phù hợp hơn để nhúng 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ụ về <video> này có một nguồn duy nhất với thuộc tính src liên kết đến nguồn video. Thuộc tính poster cung cấp một 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ế độ kiểm soát video cho người dùng.

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

Nếu không có thuộc tính src nào được đưa vào thẻ mở <video> hoặc <audio>, hãy đưa một hoặc nhiều phần tử <source> vào, mỗi phần tử có một thuộc tính src cho một tệp đa phương tiện. Ví dụ sau đây bao gồm 3 lựa chọn về tệp nội dung nghe nhìn, nội dung dự phòng và phụ đề bằng tiếng Anh và tiếng Pháp giữa thẻ mở và thẻ đó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 phần tử con <source> đều có 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 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 đa phương tiện mà trình duyệt không thể giải mã.

Trong thuộc tính type, bạn có thể thêm một tham số codecs. Tham số này chỉ định chính xác cách tài nguyên được mã hoá. Các bộ mã hoá và giải mã giúp bạn có thể thêm các chế độ tối ưu hoá nội dung nghe nhìn dưới dạng các tính năng nâng cao tăng dần (các phần tử không được tất cả trình duyệt hỗ trợ). Bộ mã hoá và giải mã được phân tách khỏi loại nội dung nghe nhìn bằng dấu chấm phẩy. Ví dụ: bạn có thể viết bộ mã hoá và giải mã bằng cú pháp trực quan, chẳng hạn như <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis"> cho biết rằng các tệp WebM chứa video VP8 và âm thanh vorbis.

Codec 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 phương thức mã hoá MP4 là Cấu hình chính của phương thức mã hoá video nâng cao cấp 4.2. Việc giải thích cú pháp này nằm ngoài phạm vi của bài học này. Để biết thêm thông tin, hãy đọc bài đăng của Jake Archibald về cách xác định tham số bộ mã hoá và giải mã cho video AV1.

Khi hiển thị một video, theo mặc định, khung hình đầu tiên của video sẽ xuất hiện dưới dạng ảnh tĩnh khi có sẵn. Đây là điều bạn có thể kiểm soát. Thuộc tính poster cho phép nguồn của một hình ảnh xuất hiện trong khi video đang tải xuống và cho đến khi video được phát. Nếu video phát và sau đó bị tạm dừng, thì áp phích sẽ không xuất hiện 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 ảnh áp phích và video sẽ gây ra hiện tượng sắp xếp lại và vẽ lại.

Luôn thêm thuộc tính boolean controls. Điều này giúp người dùng nhìn thấy các chế độ kiểm soát, cho phép họ điều chỉnh mức âm lượng, tắt tiếng hoàn toàn và mở rộng video sang chế độ toàn màn hình. Việc bỏ qua controls sẽ tạo ra trải nghiệm không tốt cho người dùng, đặc biệt là nếu 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 tuân theo chỉ thị thuộc tính autoplay nếu bạn bỏ qua thuộc tính boolean muted vì việc tự động phát tệp đa phương tiện thường mang lại trải nghiệm người dùng kém, ngay cả khi ở chế độ tắt tiếng và có các chế độ điều khiển hiển thị.

Bản nhạc

Giữa thẻ đóng bắt buộc và thẻ mở 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 phụ đề có dấu thời gian. Ví dụ sau đây bao gồm 2 tệp <track>, cung cấp phụ đề văn bản có dấu 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" />

Tệp phụ đề (đượ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ừ phi bạn thêm thuộc tính crossorigin.

Có 5 giá trị được 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 nội dung trong hộp thoại. Giá trị của mỗi thuộc tính label sẽ xuất hiện dưới dạng một lựa 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 của phụ đề bằng cách nhắm đến ::cue/ ::cue().

Bạn nên dành giá trị kind="caption" cho bản chép lời và bản dịch có hiệu ứng âm thanh và thông tin âm thanh liên quan khác. Tính năng 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 nên họ đã bật phụ đề. Hoặc có thể họ chưa nắm bắt được một vài điểm thảo luận cuối cùng trong một podcast yêu thích, nên họ muốn đọc bản chép lời để xác nhận rằng họ đã hiểu. Việc có các cách thay thế để truy cập vào nội dung âm thanh và video là điều quan trọng và thuận tiện.

kind="description" là nội dung mô tả bằng văn bản về nội dung trực quan trong video dành cho 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 (chẳng hạn như Google Home hoặc Alexa) hay là người khiếm thị.

Cung cấp phụ đề bằng định dạng WebVTT giúp người khiếm thính có thể xem video. Thính giác kém có thể là do người dùng ở trong môi trường ồn ào, có loa bị lỗi hoặc tai nghe bị hỏng, hoặc do người đó bị mất thính lực hoặc tự nhận mình là người 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ĩ, tức là giúp ích cho tất cả mọi người.

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

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

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

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

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

Để hiển thị các chế độ điều khiển video hoặc âm thanh tuỳ chỉnh thay vì các chế độ điều khiển tích hợp của trình duyệt, hãy thêm thuộc tính controls. Sau đó, hãy dùng JavaScript để thêm các chế độ điều khiển nội dung nghe nhìn tuỳ chỉnh và xoá thuộc tính controls. Ví dụ: bạn có thể thêm một <button> để bật/tắt trạng thái phát của một 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 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 được thêm vào 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 điều khiển âm thanh đều có một trình xử lý sự kiện.

Để tạo các chế độ kiểm soát tuỳ chỉnh, hãy sử dụng HTMLMediaElement.play() và HTMLMediaElement.pause(). Khi chuyển đổi trạng thái phát, hãy chuyển đổi cả 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ó thể kiểm soát âm thanh (hoặc video) ngay cả khi JavaScript gặp lỗi. Chỉ xoá thuộc tính controls sau khi bạn tạo một nút thay thế.

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

Luôn thêm các chế độ kiểm soát bên ngoài khi người dùng không thể truy cập vào các chế độ kiểm soát, chẳng hạn như với video nền có các chế độ kiểm soát bị ẩn sau nội dung trang web. Bạn cần nắm được những yêu cầu cơ bản về hỗ trợ tiếp cận nội dung nghe nhìn để đáp ứng nhu cầu về môi trường và cảm quan của người dùng, bao gồm cả hàng triệu người bị khiếm thính và suy giảm thị lực. Chúng ta vừa đề cập đến HTMLMediaElement. Phần tử này cung cấp một số thuộc tính, phương thức và sự kiện được cả HTMLVideoElement và HTMLAudioElement kế thừa, trong đó HTMLMediaElement 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ố Media API khác, bao gồm cả TextTrack API. Bạn có thể dùng API Media Capture and Streams (Truyền trực tuyến và ghi lại nội dung nghe nhìn) và MediaDevices để ghi âm bằng micrô của người dùng hoặc ghi lại màn hình của người dùng. Web Audio API cho phép thao tác với âm thanh trực tiếp và được ghi sẵn, cũng như phát trực tuyế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.