Chèn video trong HTML5

Thứ sáu - 22/04/2022 23:19

Video là một thành phần không thể thiếu trên mỗi website. Việc chèn thêm video giúp cho website của bạn trở nên sinh động và đầy đủ hơn. Bài viết dưới đây, Quản Trị Mạng sẽ giới thiệu cho bạn cách sử dung thẻ <video> để hiển thị video trên website của bạn.

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>

Lưu ý: Trong hầu hết các trường hợp, trình duyệt nhân Chromium khoog cho phép tự động phát. Nếu có, thì video luôn bị tắt tiếng khi tự chạy.

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:

Trình duyệt MP4 WebM Ogg
Edge
Chrome
Firefox
Safari  
Opera

Video HTML - Các loại media

File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Nguồn tin: Quantrimang.com

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

  Ý kiến bạn đọc

THỐNG KÊ TRUY CẬP
  • Đang truy cập39
  • Hôm nay7,074
  • Tháng hiện tại201,528
  • Tổng lượt truy cập8,096,311
QUẢNG CÁO
Phan Thanh Phú
Quảng cáo 2
Liên kết site
Đăng nhập Thành viên
Hãy đăng nhập thành viên để trải nghiệm đầy đủ các tiện ích trên site
Thăm dò ý kiến

Bạn thấy Website cần cải tiến những gì?

Lịch Âm dương
Máy tính
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây