×

Cách sử dụng thẻ <video> để phát video trên trang web trong HTML

Avatar of admin
admin 0 Views

Video đã trở thành một phần quan trọng của nhiều trang web hiện đại, cung cấp nội dung phong phú và dễ tiếp cận cho người dùng. Để nhúng video vào một trang web, thẻ <video> trong HTML là một công cụ vô cùng hữu ích và dễ sử dụng. Dưới đây là hướng dẫn chi tiết về cách sử dụng thẻ này.

Cấu trúc cơ bản của thẻ <video>

Để bắt đầu, bạn cần biết cách viết cấu trúc cơ bản của thẻ <video> trong HTML. Thẻ này có dạng như sau:

<video controls>
  <source src="path/to/your-video.mp4" type="video/mp4">
  Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Trong đó:

  • controls: Thuộc tính này thêm các điều khiển phát lại mặc định (như play, pause, volume) cho video.
  • <source>: Thẻ này chỉ định tệp video và loại định dạng của nó.

Thuộc tính của thẻ <video>

Thẻ <video> hỗ trợ nhiều thuộc tính giúp bạn tùy chỉnh việc phát video trên trang web.

  1. controls: Hiển thị các điều khiển phát lại.
  2. autoplay: Tự động phát video khi trang được tải.
  3. loop: Phát lại video từ đầu khi kết thúc.
  4. muted: Tắt âm thanh của video khi phát.
  5. poster: Hình ảnh sẽ được hiển thị trước khi video load và khi người dùng chưa nhấn phát.

Ví dụ:

<video controls autoplay loop muted poster="poster-image.jpg">
  <source src="video-file.mp4" type="video/mp4">
  Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Hỗ trợ đa định dạng

Một số trình duyệt có thể không hỗ trợ tất cả các định dạng video. Vì vậy, điều quan trọng là cung cấp nhiều nguồn video với các định dạng khác nhau. Các định dạng phổ biến bao gồm MP4, WebM và Ogg.

Ví dụ:

<video controls>
  <source src="video-file.mp4" type="video/mp4">
  <source src="video-file.webm" type="video/webm">
  <source src="video-file.ogv" type="video/ogg">
  Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Sử dụng CSS để tùy chỉnh video

Bạn có thể sử dụng CSS để tùy chỉnh cách hiển thị video trên trang web của mình. Ví dụ, bạn có thể đặt chiều rộng, chiều cao, và chặn lề của video:

<video controls class="my-video">
  <source src="video-file.mp4" type="video/mp4">
</video>

.my-video {
  width: 100%;
  height: auto;
  margin: 20px 0;
}

Xử lý kịch bản với JavaScript

Bạn cũng có thể sử dụng JavaScript để kiểm soát video, ví dụ như bắt đầu/phát lại video, tạm dừng, hoặc kiểm tra trạng thái phát.

<video id="myVideo" controls>
  <source src="video-file.mp4" type="video/mp4">
</video>
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>

<script>
  var video = document.getElementById("myVideo");

  function playVideo() {
    video.play();
  }

  function pauseVideo() {
    video.pause();
  }
</script>

Kết luận

Việc sử dụng thẻ <video> giúp bạn dễ dàng tích hợp video vào trang web của mình với nhiều tính năng và tùy chỉnh phong phú. Bằng cách kết hợp HTML, CSS và JavaScript, bạn có thể tạo ra một trải nghiệm xem video tốt nhất cho người dùng. Hãy thử khám phá và thử nghiệm với các thuộc tính và phương pháp trên để tạo ra các trang web ấn tượng và chuyên nghiệp.

Comments

Bài viết liên quan