[Bài 11] Video trong HTML5

Trong bài này, chúng ta sẽ tìm hiểu về video trong HTML5, các thẻ và các thuộc tính liên quan đến video

Ngoài văn bản và hình ảnh ra thì video cũng là một trong các phương thức dùng để thể hiện ý kiến, quan điểm của một bài viết. Do đó, HTML5 đã hỗ trợ ta một thẻ có chức năng chèn video vào tài liệu HTML5, đó chính là thẻ video trong HTML5.

Video trong HTML5

Để chèn video vào tài liệu HTML5, bạn nhập theo cấu trúc cú pháp như bên dưới:

<video controls width="480" height="270">
    <source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_1920_18MG.mp4" type="video/mp4">
    <source src="https://file-examples-com.github.io/uploads/2018/04/file_example_OGG_1920_13_3mg.ogg" type="video/ogg">
    Trình duyệt không hỗ trợ thẻ video
</video>

Và chúng ta sẽ thấy kết quả như sau:

Đối với thẻ video trong HTML5, bạn cần chú ý những điều như sau:

• Thẻ video phải có thuộc tính controls để có thể chạy video, nếu không video sẽ không thể điều khiển được.
• Mỗi thẻ <video> phải chứa ít nhất 1 thẻ <source> bên trong nó, và thẻ <source> này phải có thuộc tính src dẫn đến liên kết của video, riêng thẻ <source> không cần đóng.
• Đoạn văn bản: “Trình duyệt không hỗ trợ thẻ video” sẽ được hiện ra ngoài màn hình nếu như trình duyệt không hỗ trợ thẻ video.
• Cũng giống như hình ảnh, bạn cũng có thể thay đổi kích thước video sao cho phù hợp với thuộc tính width và height, tuy nhiên, nếu thay đổi không phù hợp sẽ làm biến dạng video như ví dụ hình ảnh mình đã giới thiệu ở bài trước.

Cách ghi nhớ:

• source (src) – là nguồn video

Các thuộc tính của video trong HTML5

Ngoài thuộc tính controls (hiện thanh điều khiển video) của thẻ <video> và thuộc tính src (dẫn đến nguồn video) của thẻ <source>, HTML5 còn mở rộng cho chúng ta một số thuộc tính như sau (tất cả đều không bắt buộc kèm theo):

• autoplay – tự động phát video ngay khi trang web (tài liệu HTML5) đã tải xong, đặt ở thẻ <video>. VD: <video autoplay></video>
• muted –  tắt âm thanh của video, đặt ở thẻ <video>, ví dụ tương tự như trên.
• type – dùng để thiết lập định dạng của video, được đặt ở thẻ <source>. VD: <source type=”video/tên-định-dạng”>
  • Một số định dạng video:
  • video/mp4 (dùng nhiều nhất)
  • video/ogg (không hỗ trợ trên safari)
  • video/wmv
  • video/mov
  • video/webm

Nói thêm về thẻ <source> thì bạn có thể đặt nhiều thẻ <source> trong 1 thẻ <video>. Khi bạn thiết lập định dạng cho video thì trình duyệt sẽ tự động phát hiện định dạng hỗ trợ đầu tiên và phát video ở định dạng đó (ví dụ như video/mp4).

Nếu video ở 1 thẻ <source> bị lỗi thì trình duyệt sẽ tự động phát video ở thẻ <source> thứ 2.

Tóm lại

Video trong HTML5

Qua bài này, chúng ta đã học được:

• Thẻ video trong HTML5.
• Các thẻ và thuộc tính đi kèm với video.

Như vậy chúng ta đã kết thúc phần HTML cơ bản, trong phần sau, chúng ta sẽ tìm hiểu về phần HTML5 nâng cao.