Â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 xem xét các tệp âm thanh và video, bao gồm cả cách nhúng tệp, các chế độ kiểm soát của người dùng, việc cung cấp một 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 giúp người dùng tiếp cận được tệp âm thanh và video.

<audio> và <video>

<video> và <audio> các phần tử có thể được dùng để nhúng trực tiếp trình phát nội dung đa phương tiện với 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 gợi ý cung cấp một tệp src đề xuất. Mặc dù có thể dùng <video> để nhúng tệp âm thanh nhưng phần tử <audio> phù hợp hơn để nhúng tệp âm thanh.

Thẻ <video> và <audio> mở 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ợ height, width và Thuộc tính 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 nút điều khiển 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ẽ hiển thị. Bắt buộc phải 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ẻ <video> hoặc <audio> mở đầu, hãy thêm một hoặc nhiều phần tử <source>, mỗi đường dẫn có 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 đa phương tiện, nội dung dự phòng, và phụ đề 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 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 loại nội dung nghe nhìn của tệp được liên kết. Việc này sẽ ngăn trình duyệt tìm nạp các tệp nội dung nghe nhìn mà nó sẽ không thể giải mã.

Trong thuộc tính type, bạn có thể thêm tham số codecs, chỉ định chính xác cách mã hoá tài nguyên. Codec cung cấp cho bạn 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 tất cả các 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ụ: 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"> ký hiệu này cho biết mã hoá MP4 là Advanced Video Coding Main Profile Level 4.2. Việc giải thích cú pháp này vượt ra ngoài phạm vi của bài học này. 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 nếu bạn muốn tìm hiểu thêm.

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 ảnh tĩnh khi có thể truy cập vào khung hình đó. Bạn có thể kiểm soát được việc này. Thuộc tính poster cho phép hiển thị nguồn của hình ảnh trong khi tải video xuống và cho đến khi nội dung đó được phát. Nếu video phát và sau đó bị tạm dừng, thì áp phích sẽ không hiển thị lại.

Hãy nhớ xác định tỷ lệ khung hình của video vì khi tải video, sự khác biệt về kích thước giữa áp phích và video sẽ gây ra hiệu ứng chỉnh lại luồng nội dung và tô màu lại.

Luôn thêm thuộc tính boolean controls. Điều này khiến người dùng kiểm soát hiển thị, cung cấp cho người dùng khả năng kiểm soát mức âm thanh, tắt tiếng hoàn toàn 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. Lưu ý rằng một số các 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 đa phương tiện thường mang lại trải nghiệm không tốt cho người dùng, ngay cả khi bị tắt tiếng và hiển thị các nút điều khiển.

Bản nhạc

Giữa 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 thẻ <track> để chỉ định các bản theo dõi văn bản 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" />

Các tệp theo dõi đượ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ừ trường hợp crossorigin được đưa vào.

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

Thêm subtitles cùng với thuộc tính srclang cho bản chép lời và bản dịch hội thoại. Giá trị của mỗi thuộc tính label được 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. Sự xuất hiện của có thể tạo kiểu cho phụ đề bằng cách nhắm mục tiêu ::cue/ ::cue().

Nên dành riêng giá trị kind="caption" cho bản chép lời và bản dịch có 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 khán giả khiếm thính. Có thể người dùng không tìm thấy tai nghe nên đã bật phụ đề. Hoặc có thể họ không nắm bắt được vài điểm cuối của một podcast yêu thích, vì vậy, họ muốn đọc bản chép lời để xác nhận rằng mình đã hiểu. 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ừa thuận tiện.

kind="description" là dành cho văn bản mô tả nội dung hình ảnh trong video cho 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 hoặc Alexa) hoặc bị mù.

Cung cấp phụ đề bằng cách sử dụng định dạng WebVTT giúp những người dùng suy giảm thính lực. Bạn cần nhớ rằng tình trạng khuyết tật không khớp giữa một người với môi trường hiện tại của họ. Có thể là do khiếm thính đến 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 dùng bị suy giảm thính lực hoặc là người bị mất thính lực. Việc đảm bảo nội dung dễ tiếp cận sẽ giúp ích cho nhiều người hơn bạn nghĩ; nó giúp ích cho mọi người.

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

Nhóm tiếp thị hoặc thiết kế nên thêm video nền vào trang web của bạn. Nói chung, điều này có nghĩa là họ muốn tắt tiếng, tự động phát, lặp lại video mà không có nút điều khiển. HTML có thể giố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. Bạn không được truyền tải nội dung qua video nền khi chưa cung cấp cho người dùng kiểm soát chế độ phát cũng như truy cập vào tất cả phụ đề. Video này chỉ mang tính chất trang trí nên có vai trò ARIA 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 từ 5 giây trở xuống, thì nguyên tắc hỗ trợ tiếp cận không yêu cầu cơ chế tạm dừng, nhưng với 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 thời gian 5 giây này (hay bất kỳ giới hạn nào khác). Ưu đãi trải nghiệm người dùng, luôn bao gồm phương pháp tạm dừng video. Bạn có thể thực hiện việc này dễ dàng nhất bằng cách thêm controls.

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

Để hiện các chế độ điều khiển âm thanh hoặc video tuỳ chỉnh, thay vì các chế độ điều khiển tích hợp sẵn của trình duyệt, hãy thêm thuộc tính controls. Sau đó sử dụng JavaScript để thêm thành phần điều khiển nội dung nghe nhìn tuỳ chỉnh và xoá thuộc tính thành phần điều khiển. Ví dụ: bạn có thể thêm <button> có thể 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 bật/tắt giữa trạng thái phát và tạm dừng. Thuộc tính aria-controls có trong id của phần tử do nút kiểm soát; 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 dùng HTMLMediaElement.play() và HTMLMediaElement.pause(). Khi bật/tắt trạng thái phát, bật/tắt 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 không thành công. Chỉ xoá thuộc tính điều khiển sau khi tạo thực thể cho nút thay thế.

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

Luôn bao gồm các chế độ điều khiển bên ngoài khi người dùng không thể truy cập vào các chế độ đó, chẳng hạn như với video trong nền bị ẩn các nút điều khiển phía sau nội dung trang web. Điều quan trọng là bạn phải hiểu thông tin cơ bản về các yêu cầu về khả năng tiếp cận nội dung nghe nhìn để phù hợp với người dùng nhu cầu khác nhau về môi trường và giác quan, bao gồm 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, nơi cung cấp một số thuộc tính, phương thức và sự kiện mà cả hai HTMLVideoElement và HTMLAudioElement, với 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ố API phương tiện khác, bao gồm cả TextTrack API. Bạn có thể dùng chức năng Ghi lại và phát trực tuyến nội dung nghe nhìn và các API MediaDevices để ghi âm từ micrô của người dùng hoặc ghi lại màn hình của người dùng. API Âm thanh web cho phép thao tác với tính năng phát trực tuyến và âm thanh trực tiếp và bản ghi sẵn, lưu hoặc gửi âm thanh đến phần tử <audio>.

Kiểm tra kiến thức

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