[Bài 11] Video trong HTML5

[Bài 11] Video trong HTML5
  1. Giới thiệu về HTML5
  2. [Bài 1] Chuẩn bị trước khi học HTML5
  3. [Bài 2] Cấu trúc HTML5 đơn giản
  4. [Bài 3] Định dạng văn bản trong HTML5
  5. [Bài 4] Thuộc tính trong HTML5
  6. [Bài 5] Liên kết trong HTML5
  7. [Bài 6] Hình ảnh trong HTML5
  8. [Bài 7] Bình luận trong HTML5
  9. [Bài 8] Danh sách trong HTML5
  10. [Bài 9] Bảng biểu trong HTML5
  11. [Bài thực hành 1] Viết cấu trúc HTML5 đơn giản
  12. [Bài 10] Iframe trong HTML5
  13. [Bài 11] Video trong HTML5
  14. HTML5 nâng cao

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 widthheight, 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
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.

0 0 bình chọn
Đánh giá bài viết

Tiền Minh Vy

Xin chào! Tôi là Tiền Minh Vy, là một lập trình viên có nhiều kinh nghiệm với Wordpress, tập trung nhiều với PHP.
Đăng ký
Thông báo cho tôi về
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận