Chèn video trong HTML5

Cách chèn video vào html5 không khó. Sau đây là hướng dẫn bạn chi tiết cách chèn video vào website HTML.

Video và âm thanh trên web

Sự bùng nổ đầu tiên của video và âm thanh trực tuyến được tạo ra nhờ các công nghệ độc quyền dựa trên plugin như Flash và Silverlight. Cả hai công nghệ này đều gặp phải các vấn đề về bảo mật và khả năng truy cập, và hiện đã lỗi thời, nhường chỗ cho các giải pháp HTML gốc <video> và <audio> cùng với sự sẵn có của các API JavaScript để kiểm soát chúng. Bài viết sẽ hướng dẫn bạn chi tiết cách chèn video vào HTML 5 cho website kèm ví dụ minh họa dễ hiểu.

Lưu ý: Trước khi bắt đầu, bạn cũng nên biết rằng có khá nhiều OVP (nhà cung cấp video trực tuyến) như YouTube, Dailymotion và Vimeo, và các nhà cung cấp âm thanh trực tuyến như Soundcloud. Các công ty này cung cấp một cách thuận tiện, dễ dàng để lưu trữ và xem video, vì vậy bạn không phải lo lắng về việc tiêu thụ băng thông khổng lồ. OVP thậm chí thường cung cấp mã nhúng video/âm thanh có sẵn vào trang web của bạn; nếu bạn sử dụng cách này, bạn có thể tránh được một số khó khăn.

Âm thanh và video có thể giúp thêm nội dung tương tác vào trang web của bạn. Điểm cộng là HTML5 cung cấp cách dễ dàng để nhúng tệp âm thanh và video. Nó có trình phát mặc định và hầu hết các trình duyệt hiện đại đều hỗ trợ trình phát HTML. Các định dạng âm thanh phổ biến nhất bao gồm:

• MP3 – định dạng âm thanh phổ biến nhất, sử dụng kỹ thuật nén mất dữ liệu và cho phép giảm kích thước tệp. Mặc dù được người dùng ưa chuộng, các công ty truyền hình và đài phát thanh vẫn sử dụng codec ISO-MPEG hiện đại hơn, chẳng hạn như AAC hoặc MPEG-H.
• AAC (Advanced Audio Codec) — codec đóng, tương tự MP3, nhưng so với codec sau, AAC cho chất lượng cao hơn với mức độ nén tương đương hoặc mạnh hơn.
• Ogg Vorbis — định dạng miễn phí với mã nguồn mở, được hỗ trợ trong Firefox, Opera và Chrome. Mang lại chất lượng âm thanh tốt, nhưng chưa được hỗ trợ đầy đủ trên các trình phát thiết bị.

HTML là viết tắt của HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản). Ngôn ngữ này được sử dụng để thiết kế các trang web bằng ngôn ngữ đánh dấu. Đây là sự kết hợp giữa Hypertext và Markup language (Ngôn ngữ đánh dấu siêu văn bản). HTML sử dụng các thẻ và thành phần được xác định trước để cho trình duyệt biết cách hiển thị nội dung trên màn hình một cách chính xác. Vì vậy, trong bài viết này, chúng ta sẽ tìm hiểu cách chèn video vào HTML5.

Ví dụ video dưới đây được chèn bằng thẻ video:

Phần tử <video> trong HTML

Để hiển thị video trên website, bạn hãy sử dụng thẻ <video> theo cấu trúc dưới đây:

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

Giải thích ví dụ trên:

- Thuộc tính controls trong ví dụ trên sẽ thêm thanh điều khiển video vào, như: phát, tạm dừng, phóng to và âm lượng...

- Bạn nên thêm thuộc tính width và height để đảm bảo cố định khung video sẽ được hiện trong quá trình load site.

- Phần tử source cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn. Mặc định, trình duyệt sẽ sử dụng định dạng được nhận dạng đầu tiên.

- Phần nội dung Text giữa các thẻ <video> và </video> sẽ chỉ hiển thị khi chạy trên các trình duyệt không hỗ trợ thẻ <video>.

Thiết lập video tự động chạy

Để video tự động chạy ngay sau khi load xong trình duyệt, bạn hãy sử dụng thuộc tính autoplay. Ví dụ như đoạn code dưới đây:

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Thêm muted sau autoplay để video của bạn luôn tự động phát (nhưng bị tắt tiếng):

<video width="320" height="240" autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Thẻ <video> được hỗ trợ trên các trình duyệt nào?

Thường thẻ video được hỗ trợ cho các trình duyệt với các phiên bản tương ứng như sau:

• Chrome 4.0 trở lên
• Edge 9.0 trở lên
• Firefox 3.5 trở lên
• Safari 4.0 trở lên
• Opera 10.5 trở lên

Định dạng video HTML

Có ba định dạng video được hỗ trợ trên trình duyệt là: MP4, WebM và Ogg. Trình duyệt hỗ trợ các định dạng khác nhau theo bảng dưới đây:

Video HTML - Các loại media

Những câu hỏi thường gặp về cách thêm video vào HTML

Định dạng video nào được hỗ trợ bởi HMTL5?

HTML5 hỗ trợ các định dạng MP4, WebM và Ogg. Bao gồm nhiều định dạng đảm bảo khả năng tương thích rộng hơn với trình duyệt.

Làm thế nào để có thể làm cho video nhúng của mình phản hồi?

Sử dụng CSS để đặt chiều rộng của video thành 100% và điều chỉnh chiều cao cho phù hợp, đảm bảo video có thể thay đổi kích thước theo các kích thước màn hình khác nhau.

Có thể tự động phát video trong HTML không?

Có, bằng cách thêm thuộc tính autoplay vào thẻ <video>. Tuy nhiên, hãy thận trọng, vì việc tự động phát video có thể ảnh hưởng đến trải nghiệm của người dùng.

Làm thế nào để thêm phụ đề vào video HTML5 của tôi?

Sử dụng phần tử <track> trong thẻ <video> để chỉ định tệp phụ đề, tăng cường khả năng truy cập cho người dùng.

Có thể nhúng video YouTube trực tiếp vào trang HTML của mình không?

Có, bằng cách sử dụng thẻ <iframe> với URL nhúng của video Youtube, bạn có thể hiển thị video YouTube trên trang web của mình.

Tóm lại, các phương pháp hay nhất để nhúng video vào HTML

• Sử dụng thẻ <video>: Sử dụng phần tử <video> để nhúng video vì nó cung cấp khả năng kiểm soát tốt hơn và được hỗ trợ rộng rãi trên các trình duyệt hiện đại.
• Cung cấp nhiều định dạng: Bao gồm nhiều định dạng video (ví dụ: MP4, WebM, Ogg) trong thẻ <video> để đảm bảo khả năng tương thích trên các trình duyệt khác nhau.

Như bạn thấy, cách chèn video vào HTML không quá khó phải không?