Chèn video: <video>

4.1 Cơ bản về thẻ <video>

Chèn video vào trang web bằng cách sử dụng phần tử <video> cho phép phát video trực tiếp trong trình duyệt. Phần tử này cung cấp nhiều tùy chọn cấu hình, bao gồm hỗ trợ các định dạng khác nhau, điều khiển bằng các thuộc tính và phương thức JavaScript. Hãy cùng xem xét phần tử này chi tiết hơn.

Ví dụ đơn giản nhất

Thẻ <video> được sử dụng với thuộc tính src, chỉ định đường dẫn đến tệp video. Bạn cũng có thể thêm thuộc tính controls để hiển thị các phần tử điều khiển tiêu chuẩn như nút phát, tạm dừng và điều chỉnh âm lượng.

    
      <video src="videofile.mp4" controls></video>
    
  

Ví dụ với nhiều nguồn

Để đảm bảo hỗ trợ cho các trình duyệt khác nhau, bạn có thể chỉ định nhiều nguồn video bằng thẻ <source>. Điều này cho phép trình duyệt chọn định dạng video được hỗ trợ.

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

Các thuộc tính thẻ <video>

• src: chỉ định đường dẫn đến tệp video
• controls: hiển thị các phần tử điều khiển phát lại
• autoplay: tự động phát video khi tải trang
• loop: lặp lại phát video khi kết thúc
• muted: tắt âm thanh khi tải video
• preload: chỉ định cách trình duyệt sẽ tải video. Các giá trị có thể: none, metadata, auto
• width và height: thiết lập chiều rộng và chiều cao của trình phát video
• poster: chỉ định hình ảnh chờ hiển thị trước khi phát video

4.2 Các thuộc tính chính

1. Tự động phát

Thuộc tính autoplay làm cho tệp video tự động bắt đầu phát ngay sau khi tải trang. Cũng như với âm thanh, cần sử dụng thuộc tính này cẩn thận để không gây khó chịu cho người dùng.

    
      <video src="videofile.mp4" autoplay></video>
    
  

2. Lặp lại video

Thuộc tính loop chỉ định rằng tệp video sẽ được phát lặp lại liên tục. Điều này hữu ích cho video nền hoặc hoạt hình.

    
      <video src="videofile.mp4" loop></video>
    
  

3. Tắt âm thanh

Thuộc tính muted tắt âm thanh của tệp video khi tải. Điều này có thể hữu ích nếu bạn muốn video phát không có âm thanh mặc định, và người dùng có thể bật âm thanh khi cần thiết.

    
      <video src="videofile.mp4" muted></video>
    
  

4. Tiền tải

Thuộc tính preload chỉ định cho trình duyệt cách tải tệp video khi tải trang. Nó có thể nhận một trong ba giá trị:

• none: trình duyệt không nên tải trước video
• metadata: trình duyệt chỉ nên tải siêu dữ liệu (thời lượng, kích thước, v.v.)
• auto: trình duyệt nên tải toàn bộ video khi trang tải

    
      <video src="videofile.mp4" preload="auto"></video>
    
  

5. Post

Thuộc tính poster chỉ định hình ảnh chờ hiển thị trước khi phát video. Điều này có thể hữu ích để cung cấp thông tin hình ảnh cho người dùng về nội dung video.

    
      <video src="videofile.mp4" poster="posterimage.jpg"></video>
    
  

4.3 Các định dạng video được hỗ trợ

Để đảm bảo khả năng tương thích chéo trình duyệt, nên sử dụng nhiều định dạng video. Các định dạng phổ biến nhất bao gồm MP4, WebM và OGG.

Định dạng MP4

MP4 (MPEG-4 Part 14) là một trong những định dạng video phổ biến nhất. Nó được hỗ trợ bởi hầu hết các trình duyệt và thiết bị. MP4 sử dụng nén có mất mát và cung cấp chất lượng video tốt với kích thước tệp tương đối nhỏ.

Ví dụ:

    
      <video src="videofile.mp4" type="video/mp4"></video>
    
  

Định dạng WebM

WebM là định dạng nén video mở, được phát triển để sử dụng trên internet. Nó được hỗ trợ bởi hầu hết các trình duyệt hiện đại và cung cấp chất lượng video tốt.

Ví dụ:

    
      <video src="videofile.webm" type="video/webm"></video>
    
  

Định dạng OGG

OGG (Ogg Theora) là định dạng video mở, được hỗ trợ bởi nhiều trình duyệt. Định dạng này cung cấp chất lượng video tốt và thường được sử dụng như một sự thay thế cho MP4 và WebM.

Ví dụ:

    
      <video src="videofile.ogv" type="video/ogg"></video>
    
  

Ví dụ sử dụng nhiều định dạng để đảm bảo tương thích

Để đảm bảo khả năng tương thích chéo trình duyệt, nên chỉ định nhiều nguồn video ở các định dạng khác nhau. Trình duyệt sẽ chọn định dạng đầu tiên được hỗ trợ.

    
      <video width="600" controls autoplay muted>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Trình duyệt của bạn không hỗ trợ phần tử video.
      </video>