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>Nội dung chính
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 width và height. 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> và </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à:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (from Opera 25) | YES | YES |
4. HTML Video – Media Types
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/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!
