Thẻ Video và Audio trong HTML: Hướng dẫn Toàn tập

Bạn muốn làm website của mình sống động hơn với âm nhạc và hình ảnh? Việc sử dụng các thẻ video và audio trong html chính là chìa khóa để làm điều đó một cách chuyên nghiệp. Quên đi thời Flash phức tạp, HTML5 đã mang đến giải pháp gốc cực kỳ mạnh mẽ và dễ sử dụng. Trong bài viết này, WiWeb sẽ hướng dẫn bạn từ A-Z, kèm theo code mẫu để bạn tìm hiểu và thực hành ngay lập tức.

Giới thiệu thẻ video và audio

Trước đây, việc thêm video hay âm thanh vào website là một thử thách. Các lập trình viên thường phải dựa vào các plugin của bên thứ ba, mà nổi bật nhất là Adobe Flash. Tuy nhiên, cách làm này có nhiều nhược điểm.

Tại sao thẻ video và audio ra đời?

HTML5 đã thay đổi cuộc chơi bằng cách giới thiệu hai thẻ gốc là <video> và <audio>. Chúng ra đời để giải quyết trực tiếp những vấn đề của Flash. Giờ đây, việc nhúng media trở thành một phần tiêu chuẩn của web, không cần cài đặt thêm bất cứ thứ gì. Trình duyệt có thể tự xử lý video và âm thanh một cách mượt mà.

Ưu điểm so với các giải pháp cũ như Flash

So với Flash, thẻ HTML5 mang lại những lợi ích vượt trội:

• Không cần plugin: Người dùng không phải cài đặt hay cập nhật Flash Player. Điều này giúp trải nghiệm liền mạch và an toàn hơn.
• Tương thích di động: Flash hoạt động rất kém trên các thiết bị di động. Ngược lại, thẻ HTML5 được hỗ trợ hoàn hảo trên điện thoại và máy tính bảng.
• Hiệu suất tốt hơn: Media phát bằng HTML5 tiêu thụ ít tài nguyên hệ thống hơn, giúp trang web tải nhanh và hoạt động ổn định.
• Tiêu chuẩn mở: Đây là một phần của chuẩn web, đảm bảo tính tương thích và phát triển lâu dài.

Hướng dẫn cách chèn video và audio vào HTML

Bây giờ, hãy cùng WiWeb đi vào phần thực hành. Bạn sẽ thấy cách chèn video vào html hay thêm một bản nhạc nền thật sự rất đơn giản.

Cú pháp cơ bản của thẻ video

Để hiển thị một video, bạn chỉ cần dùng thẻ <video> và trỏ thuộc tính src đến file video của bạn. Đừng quên thêm thuộc tính controls để người dùng có thể điều khiển nhé.

<video src="video-cua-ban.mp4" controls>
  Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Cú pháp cơ bản của thẻ audio

Tương tự như video, việc chèn nhạc vào html cũng sử dụng cấu trúc gần như y hệt với thẻ <audio>. Cách này rất gọn gàng phải không nào?

<audio src="nhac-nen.mp3" controls>
  Trình duyệt của bạn không hỗ trợ thẻ audio.
</audio>

Nội dung thay thế cho các trình duyệt không hỗ trợ

Bạn có để ý dòng chữ nằm giữa thẻ mở và thẻ đóng không? Trình duyệt của bạn không hỗ trợ thẻ video.

Đây chính là nội dung thay thế. Nó sẽ chỉ hiển thị khi trình duyệt của người dùng quá cũ và không thể nhận diện được thẻ <video> hoặc <audio>. Đây là một cách hay để đảm bảo trang web của bạn vẫn thân thiện với mọi đối tượng.

Các thuộc tính quan trọng của thẻ Video và Audio

Để tùy biến trình phát media, bạn cần nắm rõ các thuộc tính thẻ video html5. Hầu hết các thuộc tính này đều dùng được cho cả thẻ <video> và <audio>. WiWeb sẽ liệt kê những thuộc tính phổ biến nhất ngay dưới đây.

Thuộc tính src

Đây là thuộc tính quan trọng nhất, dùng để chỉ định đường dẫn đến file video hoặc audio của bạn. Đường dẫn có thể là tương đối (trên cùng server) hoặc tuyệt đối (một URL đầy đủ).

<video src="/videos/gioi-thieu.mp4"></video>

Thuộc tính controls

Khi thêm thuộc tính này, trình duyệt sẽ tự động hiển thị một bộ điều khiển cơ bản. Nó bao gồm nút phát/tạm dừng, thanh thời gian, điều chỉnh âm lượng, và tùy chọn toàn màn hình (cho video).

<video src="video-cua-ban.mp4" controls></video>

Thuộc tính autoplay & muted

Thuộc tính autoplay cho phép media tự động phát ngay khi trang được tải. Tuy nhiên, hầu hết các trình duyệt hiện đại sẽ chặn tính năng này nếu video có tiếng để không làm phiền người dùng. Giải pháp là kết hợp nó với muted (tắt tiếng).

Đây là cách thiết lập html video autoplay muted chuẩn nhất:

<video src="video-cua-ban.mp4" autoplay muted></video>

Thuộc tính loop

Nếu bạn muốn video hoặc audio tự động phát lại từ đầu sau khi kết thúc, chỉ cần thêm thuộc tính loop.

<audio src="nhac-nen.mp3" loop controls></audio>

Thuộc tính width và height

Hai thuộc tính này chỉ dành cho thẻ <video>, giúp bạn đặt kích thước (tính bằng pixel) cho khung hình video. Tuy nhiên, WiWeb khuyên bạn nên sử dụng CSS để kiểm soát kích thước sẽ linh hoạt hơn.

<video src="video-cua-ban.mp4" width="640" height="360" controls></video>

Thuộc tính poster

Thuộc tính poster cho phép bạn chỉ định một hình ảnh để hiển thị trước khi video bắt đầu phát. Nó giống như ảnh thumbnail trên YouTube, giúp video của bạn trông hấp dẫn hơn.

<video src="video-cua-ban.mp4" poster="thumbnail.jpg" controls></video>

Đảm bảo tương thích đa trình duyệt với thẻ source

Một vấn đề bạn có thể gặp phải là video chạy tốt trên Chrome nhưng lại không hoạt động trên Firefox hoặc Safari. Nguyên nhân là do các trình duyệt hỗ trợ các định dạng media khác nhau. Đây là lúc thẻ source trong html phát huy tác dụng.

Tại sao cần cung cấp nhiều định dạng file?

Không có một định dạng video html5 duy nhất nào được tất cả các trình duyệt hỗ trợ 100%. Ví dụ, Safari trên các thiết bị cũ có thể không phát được định dạng WebM. Bằng cách cung cấp nhiều định dạng, bạn cho phép trình duyệt tự chọn định dạng mà nó có thể phát được.

Cách sử dụng thẻ source trong video và audio

Thay vì dùng thuộc tính src trên thẻ chính, bạn sẽ đặt nhiều thẻ <source> bên trong. Mỗi thẻ <source> trỏ đến một định dạng file khác nhau. Trình duyệt sẽ duyệt từ trên xuống dưới và phát file đầu tiên nó hỗ trợ.

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

HTML hỗ trợ những định dạng video và audio nào?

Các định dạng phổ biến và được hỗ trợ rộng rãi nhất hiện nay bao gồm:

• Video: MP4 (H.264), WebM (VP8/VP9), Ogg (Theora).
• Audio: MP3, WAV, Ogg (Vorbis).

WiWeb khuyên bạn nên cung cấp ít nhất hai định dạng là MP4 và WebM cho video để đạt độ tương thích cao nhất.

Tăng khả năng truy cập với phụ đề và chú thích

Để nội dung của bạn tiếp cận được nhiều người hơn, bao gồm cả người khiếm thính hoặc người xem trong môi trường ồn ào, việc thêm phụ đề là rất quan trọng. HTML5 cung cấp thẻ <track> để làm việc này một cách dễ dàng.

Giới thiệu thẻ track và các loại track

Thẻ <track> được đặt bên trong thẻ <video> hoặc <audio>. Nó dùng để liên kết đến một file văn bản chứa thông tin thời gian và nội dung phụ đề (thường có định dạng WebVTT – .vtt).

Có nhiều loại track, nhưng hai loại chính là:

• subtitles: Dịch nội dung âm thanh sang một ngôn ngữ khác.
• captions: Phiên âm lại lời thoại và mô tả các âm thanh quan trọng, dành cho người không thể nghe được.

Ví dụ thêm phụ đề tiếng Việt cho video

Giả sử bạn có một file tên là phude-tieng-viet.vtt. Bạn sẽ thêm nó vào video như sau:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track
    src="phude-tieng-viet.vtt"
    kind="subtitles"
    srclang="vi"
    label="Tiếng Việt"
    default
  >
</video>

Trong đó:

• src: Đường dẫn đến file .vtt.
• kind: Loại track (subtitles).
• srclang: Mã ngôn ngữ (vi là tiếng Việt).
• label: Tên ngôn ngữ sẽ hiển thị cho người dùng chọn.
• default: Đặt phụ đề này làm mặc định.

Lời kết

Vậy là chúng ta đã cùng nhau tìm hiểu toàn bộ về thẻ video và audio trong html. Hy vọng qua bài viết này, bạn đã tự tin hơn trong việc làm cho website của mình trở nên sinh động và chuyên nghiệp.

Dưới đây là Tóm tắt các điểm chính của bài viết:

• Thẻ <video> và <audio> là cách chuẩn của HTML5 để nhúng media, thay thế hoàn toàn Flash.
• Sử dụng thuộc tính controls để hiển thị trình điều khiển cho người dùng.
• Kết hợp autoplay và muted để video tự động phát mà không bị trình duyệt chặn.
• Dùng thẻ <source> để cung cấp nhiều định dạng, đảm bảo video/audio chạy trên mọi trình duyệt.
• Dùng thẻ <track> để thêm phụ đề, tăng khả năng tiếp cận cho nội dung.

Một lời khuyên cuối cùng từ WiWeb: luôn tối ưu hóa file media trước khi tải lên. File video và audio có dung lượng rất lớn, có thể làm chậm tốc độ tải trang đáng kể. Hãy nén file ở mức chất lượng chấp nhận được để đảm bảo người dùng có trải nghiệm tốt nhất.

Bạn còn thắc mắc nào về chủ đề này không? Hãy để lại bình luận bên dưới, WiWeb sẽ giải đáp giúp bạn nhé!

Nếu bạn cần thiết kế website chuyên nghiệp để phát triển thương hiệu, WiWeb luôn sẵn sàng tư vấn. Liên hệ với chúng tôi nhé!