Cafedev chia sẻ về cách hiển thị video trong html bằng thẻ video.

Ví dụ:

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML video.
</video>

<p>
Video courtesy of 
<a href="https://cafedev.vn" target="_blank">Cafedev.vn</a>.
</p>

</body> 
</html>

Copy and chạy code

1. Phần tử <video>

Để hiển thị video bằng HTML, hãy sử dụng phần tử <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> 

Nó Làm thế nào nó hoạt động?

Thuộc tính controls thêm các điều khiển video, như phát, tạm dừng và âm lượng.

Đó là một ý tưởng tốt để luôn luôn bao gồm các thuộc tính widthheight. Nếu chiều cao và chiều rộng không được đặt, trang có thể nhấp nháy trong khi video tải.

Phần tử <source> cho phép bạn chỉ định các file video thay thế mà trình duyệt có thể chọn để phát.

Văn bản giữa các thẻ <video></video> sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử <video> .

2. Auto play video

Để bắt đầu video tự động sử dụng thuộc tính autoplay:

 <video width="320" height="240" autoplay>
  <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 autoplay không hoạt động trong các thiết bị di động như iPad và iPhone.

3. Format video trong HTML

Có ba định dạng video được hỗ trợ: MP4, WebM và Ogg. Trình duyệt hỗ trợ cho các định dạng khác nhau là:

BrowserMP4WebMOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESNONO
OperaYES (from Opera 25)YESYES

4. HTML Video – Media Types

File FormatMedia Type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!