Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh.

Một khi đã cảm thấy tự tin làm việc với hình ảnh trên web, bước tiếp theo chúng ta học cách thêm video và audio player vào HTML! Trong bài viết này chúng ta sẽ học cách sử dụng thẻ <video><audio> ; cách thêm captions/subtitles vào trong video.

Cần nắm trước: Kiến thức máy tính căn bản, biết cài đặt phần mềm, làm việc với file, có nền tảng HTML (đã giới thiệu trong bài Getting started with HTML) và Images in HTML.
Mục tiêu: Học cách chèn video và audio vào web, thêm caption/subtitles.

Audio và video trên web

Web developer đã muốn sử dụng audio và video từ rất lâu, trước những năm 2000, khi chúng ta bắt đầu có mạng với băng thông lớn hơn, đủ đáp ứng nhiều loại video, (file video thường lớn hơn nhiều so với hình và text.) Trước đây, HTML không thể nhúng video và audio trên Web, trước đây chúng ta sử dụng những plugin như Flash (sau đó là Silverlight) để xử lý những nội dung dạng này. Các công nghệ này vướng phải nhiều vấn đề, như không tương thích tốt với HTML/CSS, lỗi bảo mật, và các vấn đề với accessibility.

HTML5 specification đã bổ sung element <video><audio>, cùng với JavaScript APIs để làm việc với 2 element này. Chúng ta không bàn về JavaScript ở đây — chỉ những phần cơ bản có thể với HTML.

Chúng ta sử dụng file audio và video ví dụ để làm.

Ghi chú: Trước khi bắt đầu, bạn cũng nên biết những trang OVPs (online video providers) như YouTube, Dailymotion, và Vimeo, và online audio providers như Soundcloud. Dùng các dịch vụ này để host và hiển thijvideo sẽ đơn giản và tiện lợi hơn, không cần lo lắng về vấn đề băng thông, OVPs cũng thường có hổ trợ code để nhúng video/audio vào web.

Thẻ <video>

Ví dụ cách sử dụng thẻ <video>:

<video src="rabbit320.webm" controls>
  <p>Trình duyệt không hổ trợ HTML5 video. Đây là <a href="rabbit320.webm">link đến file video</a></p> 
</video>

 

src
Tương tự như src của <img>, attribute src chứa đường dẫn đến file video muốn nhúng.
controls
controls cho phép sử dụng giao diện điều khiển trình chiếu video của trình duyệt, hoặc tự build một giao diện bằng JavaScript API. Căn bản nhất, giao diện sẽ có nút start và stop, điều chỉnh âm lượng.
Thẻ paragraph trong <video>
Gọi là fallback content — nó sẽ hiện thị nếu trình duyệt không hổ trợ thẻ <video> , cho phép chúng ta hiển thị fallback nếu user đang dùng trình duyệt cũ.

Video nhúng sẽ được hiển thị như sau:

A simple video player showing a video of a small white rabbit

Dùng thử ví dụ trực tiếp ở đây (xem source code.)

Hổ trợ nhiều loại formats

Có một vấn đề với ví dụ ở trên, nếu mở bằng Safari hoặc Internet Explorer. Video sẽ không phát! Bởi vì mỗi trình duyệt chỉ hỗ trợ kiểu video và audio nhất định.

Những định dạng MP3, MP4 và WebM được gọi là container formats. nó sẽ chứa nhiều phần khác nhau tạo thành một bài hát hoặc video — chằng hạn như video track, audio track, và metadata để diễn giải nội dung file media.

Audio và video track cũng có nhiều định dạng khác nhau, ví dụ:

  • WebM container thường bao gồm Ogg Vorbis audio với VP8/VP9 video. Được hổ trợ chủ yếu bởi Firefox và Chrome.
  • MP4 container thường bao gồm AAC hoặc MP3 audio với H.264 video. Được hổ trợ chủ yếu bởi Internet Explorer và Safari.
  • Ogg container (đã cũ) thường có Ogg Vorbis audio và Ogg Theora video. Được hổ trợ chủ yếu bởi Firefox và Chrome, bị xóa sổ bởi định dạng WebM cho chất lượng âm thanh hình ảnh tốt hơn.

Audio player thường phát audio track trực tiếp, e.g. an MP3 hoặc Ogg . Nó không cần container.

Ghi chú: Vấn đề này không hề đơn giản, nếu bạn xem qua bảng audio-video codec compatibility . Thêm nữa, nhiều trình duyệt trên mobile có thể phát unsupported format bằng việc sử dụng trình phát của hệ thống, không thông qua trình duyệt.

Trình duyệt sử dụng những bộ Codecs khác nhau, như Vorbis hoặc H.264. Như đã đề cập ở trên, trình duyệt lại không hổ trợ toàn bộ codec, vì vậy bạn phải cung cấp nhiều định dạng khác nhau. Nếu thiếu bộ codec đúng để giải mã, nó sẽ không phát.

Xem ví dụ bên dưới để biết cách làm ví dụ được cập nhập ở đây (thử bản trực tiếp ở đây):

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Trình duyệt không hổ trợ HTML5 video. Đây là <a href="rabbit320.webm">link đến file video</a></p> 
</video>

Bằng cách này trình duyệt sẽ tìm đến file mà nó có codec để giả mã trong danh sách file được liệt kê trong thẻ source. WebM và MP4 là có thể xem được ở hầu hết các trình duyệt hiện tại.

Trên mỗi thẻ <source> có attribute type . Cái này không bắt buộc, nhưng nên làm — nó chứa thông tin MIME types của video, trình duyệt khi đọc qua nó sẽ biết ngay có giải mã được video kiểu này không. Nếu không thêm attribute này, trình duyệt sẽ load và thử phát từng file đến khi nào thấy được, nó sẽ tiêu tốn nhiều thời gian và tài nguyên hơn.

Các tính năng khác của <video>

Có một số tính năng khác bao gồm trong thẻ video của HTML5. Xem ví dụ bên dưới:

<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
 <p>Trình duyệt không hổ trợ HTML5 video. Đây là <a href="rabbit320.webm">link đến file video</a></p> 
</video>

Nó sẽ cho ra kết quả như thế này trên trình duyệt:

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!Những tính này bao gồm:

widthheight
Cho phép tinh chỉnh kích thước bằng atttribute hoặc bằng CSS. Trong cả 2 trường hợp, video luôn giữ nguyên tỉ lệ chiều cao-chiều rộng của nó — thường gọi là aspect ratio. Nếu không đưa đúng giá trị cao và rộng đảm bảo aspect ratio, video sẽ phủ hết chiều ngang, phần chiều rộng bị thiếu hoặc dư sẽ hiển thị bằng màu nền mặc định.
autoplay
Attribute cho phép audio hoặc video phát ngay lập tức trong khi các phần khác của trang tiếp tục được load. Khuyến khích không nên dùng tính năng này, users sẽ cảm thấy khá khó chịu.
loop
Cho phép video audio lặp lại khi kết thúc
muted
Bật mặc định tắt tiếng
poster
Truyền vào url của hình, được hiển thị thay cho video trước khi phát.
preload

Được dùng để bật tính năng buffer nếu file lớn. Truyền vào 1 trong 3 giá trị:

  • "none" tắt buffer
  • "auto" tự động buffer nếu file lớn
  • "metadata" chỉ buffer những thông tin meta data

Ví dụ này có thể phát trực tiếp trên Github (xem source code.) Để ý, trong ví dụ không đặt thuộc tính autoplay — nếu video tự động phát ngay khi được load, chúng ta sẽ không thấy poster!

Thẻ <audio>

Thẻ <audio> hoạt động tương tự như thẻ <video>:

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>

Kết quả hiển thị trên trình duyệt

A simple audio player with a play button, timer, volume control, and progress bar

Ghi chú: Bạn có thể xem demo trực tiếp trên Github (xem source code.)

Một vài điểm khác so với video:

  • Thẻ <audio> không hổ trợ attribute width/height
  • Cũng không hổ trợ attribute poster.

Hiển thị Text track cho video

Chúng ta nói thêm về một khái niệm hơi phức tạp hơn nhưng rất hữu ích. Đa phần user không đủ kiên nhẫn đễ đợi audio/video nếu quá lâu. Và một số trường hợp khác:

  • Không có thiết bị để phát âm thanh, người khuyết tật không thể nghe được.
  • Không nghe rõ vì môi trường xung quanh quá ồn, hoặc không muốn gây ra âm thanh ví dụ như đang ngồi trong thư viện
  • User có thể không hiểu ngôn ngữ đang phát, nhưng họ có thể đọc hiểu được.

Với HTML5 video chúng ta có thể cung cấp đoạn text cho phần âm thanh đang phát, với định dạng WebVTT và thẻ <track> .

Ghi chú: "Transcribe" và "transcript" nghĩ là viết lại thành văn bản cho phần âm thanh.

WebVTT là định dạng cho phép viết text dạng nhiều dòng bên trong metadata, thời gian đoạn text xuất hiện trong video, thậm chí styling/position. Đoạn text này gọi là cues, các trường hợp sử dụng thường thấy:

subtitle
Dịch thuật
caption
Đồng bộ phần transcription với thoại, hoặc diễn giải phần âm thanh đang phát.
timed description
Hiển thị text cho người không thể nghe được.

File WebVTT sẽ như thế này:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

  ...

Để hiển thị cùng khi đang phát, bạn cần:

  1. Lưu với định dạng .vtt.
  2. Link đến file .vtt bằng thẻ <track>. <track> phải đặt trong thẻ <audio> hoặc <video>, sau tất cả thẻ <source>. Sử dụng attribute kind để xác định cái cue là subtitles, captions, hay descriptions. Thêm nữa, sử dụng srclang để nói với trình duyệt ngôn ngữ đang sử dụng trong subtitle.

Ví dụ:

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

Kết quả sẽ như thế này:

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

Để biết thêm chi tiết, đọc thêm Adding captions and subtitles to HTML5 video. Bạn có thể xem ví dụ dùng trong bài viết này trên Github, tác giả Ian Devlin (xem source code.). Để ý có thể tắt/mở subtitle bằng cách click nút "CC" và tùy chọn ngôn ngữ — English, Deutsch, hoặc Español.

Ghi chú: Text track cùng đồng thời hổ trợ SEO, bởi vì các máy tìm kiếm luôn đọc text.

Hãy học một cách chủ động: tự nhúng video và audio

Bạn có thể dùng file audio/video ví dụ để tự thực hành.

Chỉ dẫn:

  1. Lưu file audio/video vào một thư mục mới.
  2. Tạo một file HTML mới trong cùng thư mục này, đặt là index.html.
  3. Thêm thẻ <audio><video> vào trang; để xem kết quả hiển thị bằng trình phát mặc định của trình duyệt.
  4. Đưa đường link vào thẻ <source>. Nhớ khai báo type.
  5. Với thẻ <video> khai báo attribute poster.

Xem thêm các tài liệu tham khảo khác

Trong loạt bài này

Document Tags and Contributors

Những người đóng góp cho trang này: luubinhan
Cập nhật lần cuối bởi: luubinhan,