Mục lục

Hướng dẫn sử dụng HTML Video

Xem thêm các chuyên mục:

1- HTML Video

Thẻ <video> được đưa vào HTML5, nó giúp bạn nhúng một video vào trong trang web. HTML4 thực tế không có thẻ chuyên biệt cho video, để nhúng được video, HTML4 sử dụng thẻ <embed> hoặc <object> hoặc <iframe> đồng thời phải cài đặt một phần mềm bổ xung cho trình duyệt chẳng hạn như Flash hoặc QuickTime.
Với thẻ <video> việc nhúng một video trên trang web trở nên đơn giản hơn, và bạn không cần cài đặt bất kỳ một phần mềm bổ xung nào khác vào trình duyệt. Hầu hết các trình duyệt đã hỗ trợ HTML5, vì vậy nó hỗ trợ thẻ <video>.
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">

  Your browser does not support the video tag.

</video>
Thuộc tính controls nói với trình duyệt hãy hiển thị các điều khiển cho video, chẳng hạn nút play, nút tạm dừng, âm lượng,..
Thẻ <source> xuất hiện trong thẻ <video> cung cấp một nguồn video thay thế cho trình duyệt. Trình duyệt có thể sử dụng một trong các nguồn video được cung cấp, thứ tự ưu tiên từ trên xuống dưới.
Nội dung văn bản trong thẻ <video> chỉ hiển thị nếu trình duyệt không hỗ trợ thẻ <video> hoặc không hỗ trợ bất kỳ một định dạng video nào được cung cấp bởi các thẻ <source>.
video-example.html
<!DOCTYPE html>
<html>

<head>
    <title>Video</title>
    <meta charset="UTF-8">
</head>
<body>
    <h3>Video example:</h3>

    <video width="320" height="240" controls>
      <source src="../resources/mov_bbb.mp4" type="video/mp4">
      <source src="../resources/mov_bbb.ogg" type="video/ogg">

      Your browser does not support the video or formats.

    </video>

</body>
</html>
Các trình duyệt và sự hỗ trợ các định dạng video:
Browser MP4
(video/mp4)
WebM
(video/webm)
Ogg
(video/ogg)
Internet Explorer 16x16    
Chrome 16x16 16x16 16x16
Firefox 16x16 16x16 16x16
Safari 16x16    
Opera 16x16
(>= 25)
16x16 16x16

2- Video Attributes

Giống như tất cả các phần tử (element) khác, phần tử <video> hỗ trợ tất cả các thuộc tính chung (global attributes).
  • TODO Link!
Ngoài ra nó có các thuộc tính khác dưới đây:
  • src
  • controls
  • autoplay
  • buffered
  • crossorigin
  • currentTime
  • duration (Read only)
  • height
  • width
  • loop
  • muted
  • playsinline
  • poster
  • preload

Xem thêm các chuyên mục: