Hướng dẫn cách chèn thẻ video trong HTML

Thẻ video trong HTML là câu lệnh được sử dụng để chèn “trình xem phim” cho một website nào đó. Dòng lệnh này không quá khó để thực hiện. Tuy nhiên, chúng vẫn cần độ chính xác cao nhằm tối ưu hóa website của bạn một cách tốt nhất. Cách chèn thẻ video trong HTML như nào? Hãy cùng xem bài viết dưới đây.

1. Thẻ video trong HTML

Như đã biết, thẻ video trong HTML được dùng để tạo “trình xem video” trên nền tảng website. Để có thể tạo trình xem video này, trước hết thẻ video cần phải được sử dụng đồng bộ với thẻ source nhằm xác định chính xác tệp tin mà bạn muốn trình chiếu.

Ví dụ như:

<!DOCTYPE html>
<html>
<body>
    <video controls>
        <source src="../file/bunny.mp4">
    </video>
</body>
</html>

Đây là 1 đoạn mã được dùng để tạo trình xem video cơ bản nhất.

2. Các thuộc tính được sử dụng trong thẻ audio

Để trình xem video có khả năng phát ra âm thanh đi kèm, bạn còn cần kết hợp thẻ video với thẻ audio. Để phần âm thanh trùng khớp với video, bạn cần hiểu rõ 9 thuộc tính cơ bản của thẻ video trong HTML như sau:

  • Src: xác định đường dẫn của tập tin muốn trình chiếu
  • Controls: thiết kế “thanh điều khiển của trình xem phim khi hiển thị”
  • Autoplay: thiết lập hành động nhằm cài đặt hành động “tự động phát video” khi video đã được tải hoàn chỉnh lên website
  • Loop: thiết lập hành động tự phát lại video mỗi lần kết thúc
  • Muted: cài đặt chế độ tắt âm thanh cho video
  • Preload: cài đặt chế độ đồng bộ thời gian tải video cùng lúc với khi tải trang
  • Poster: cài đặt chế độ hiển thị ảnh thumbnail trước khi phát video
  • Width: cài đặt kích thước chiều ngang tiêu chuẩn của video
  • Height: cài đặt kích thước chiều dọc tiêu chuẩn của video
Các thuộc tính của thẻ video trong html sẽ giúp trình video hoàn thiện hơn
Các thuộc tính sẽ giúp trình video hoàn thiện hơn

3. Những định dạng video được hỗ trợ

Hiện nay, các trình duyệt web phổ biến như Chrome, Firefox, Opera, Safari, Internet Explorer đều có hỗ trợ thẻ định dạng video MP4. Đây là định dạng video được đánh giá tối ưu nhất, đem lại trải nghiệm tốt cho người dùng. Có thể đọc được trên nhiều trình duyệt máy tính khác nhau. 

Ngoài định dạng MP4, định dạng WebM hay Ogg cũng được sử dụng khá nhiều, đặc biệt là với các tệp video có dung lượng cao. Tuy nhiên, 2 định dạng video này chỉ được hỗ trợ trên Chrome, Firefox và Opera, còn 2 trình duyệt đặc thù là Safari và Internet Explorer thì không.

MP4 là định dạng video được hỗ trợ đa nền tảng
MP4 là định dạng video được hỗ trợ đa nền tảng

Trên đây là những hướng dẫn cơ bản về việc thực hiện cài đặt một thẻ video vào trong HTML. Hy vọng thông qua bài viết này, bạn có thể dễ dàng tìm hiểu, tối ưu cách ứng dụng thẻ video trong HTML cho website của mình. 

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

branding
branding
February 07, 2021
0
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan

Thẻ style trong HTML là gì? Các thuộc tính trong thẻ style

Style trong HTML là một thuộc tính đặc biệt dùng để khai báo các định dạng cho thẻ HTML như màu sắc, font chữ, cỡ chữ, màu nền,… Bài viết này sẽ chia sẻ những kiến thức cơ bản về thẻ style và một số thuộc tính của thẻ này.    Mục lục1. Thẻ style trong […]

Stylesheet là gì? Chức năng và lợi ích của Stylesheet

Trước đây, khi mỗi trang web được hiển thị, người ta không thể thay đổi bất cứ thứ gì trên đó. Bài viết này sẽ chia sẻ kiến thức Stylesheet là gì và khả năng hỗ trợ của nó trong HTML động nhằm thực hiện những thay đổi trên trang. Mục lục1. Khái niệm Stylesheet […]
Hướng dẫn cách chèn thẻ video trong HTML

Hướng dẫn cách chèn thẻ video trong HTML

Thẻ video trong HTML là câu lệnh được sử dụng để chèn “trình xem phim” cho một website nào đó. Dòng lệnh này không quá khó để thực hiện. Tuy nhiên, chúng vẫn cần độ chính xác cao nhằm tối ưu hóa website của bạn một cách tốt nhất. Cách chèn thẻ video trong HTML […]
Hiện tại có tất cả bao nhiêu mã màu cơ bản có thể được nhận dạng bởi tất cả các phiên bản HTML?

Hiện tại có tất cả bao nhiêu mã màu cơ bản có thể được nhận dạng bởi tất cả các phiên bản HTML?

Trong thiết kế giao diện website, màu sắc là một yếu tố quan trong giúp website mang đến trải nghiệm người dùng tốt hơn. Vậy, hiện tại có tất cả bao nhiêu mã màu cơ bản có thể được nhận dạng bởi tất cả các phiên bản HTML? Để trả lời câu hỏi này, mời […]
HTML là viết tắt của từ nào? HTML dùng để làm gì?

HTML là viết tắt của từ nào? HTML dùng để làm gì?

HTML là viết tắt của cụm từ nào, chúng được sử dụng để làm gì là những câu hỏi được rất nhiều người mới bắt đầu làm quen với giao diện website quan tâm. Hãy cùng tham khảo nội dung bài viết sau đây của Got It để hiểu thêm về khái niệm này bạn […]
HTML có phải là ngôn ngữ lập trình không?

HTML có phải là ngôn ngữ lập trình không?

Với lập trình viên hoặc ai làm việc thường xuyên với trình duyệt web thì HTML là từ ngữ không hề xa lạ. Vậy, HTML có phải là ngôn ngữ lập trình không? Chúng thực chất được định nghĩa như thế nào? Cùng Got It tìm hiểu câu trả lời ngay sau đây. Mục lục1. […]