NỘI DUNG BÀI VIẾT
Ví dụ về video trong HTML
Nguồn: Big Buck Bunny
Chạy video trong HTML
Trước HTML5, video chỉ có thể được chạy được trong các trình duyệt có cài đặt plug-in để xem video (ví dụ như flash).
Video trong HTML5 định nghĩa một chuẩn để nhúng video vào một trang web.
Phần tử <video> trong HTML
Để hiển thị một video HTML, sử dụng phần tử <video>:
Ví dụ:
<video width="600" height="300" controls> <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4"> <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg"> Trình duyệt của bạn không hỗ trợ thẻ video. </video>
Kết quả:
Cách hoạt động?
Thuộc tính controls thêm các điều khiển cho video như chạy, dừng và âm lượng.
Một ý tưởng tốt là luôn sử dụng thuộc tính chiều rộng (width) và chiều cao (height). Nếu chiều cao và chiều rộng không được thiết lập, trang web có thể rung hình trong khi tải video.
Phần tử <source> cho phép bạn định nghĩa các các tập tin video thay thế mà trình duyệt có thể chọn từ đó. Trình duyệt sẽ sử dụng các định dạng đầu tiên mà nó nhận biết được.
Đoạn văn bản nằm giữa thẻ <video> và </video> sẽ chỉ hiển thị trong trình duyệt mà trình duyệt không hỗ trợ phần tử <video>.
Phát tự động video trong HTML
Để một video chạy tự động ta sử dụng thuộc tính autoplay:
Ví dụ:
<video width="600" height="300" autoplay> <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4"> <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg"> Trình duyệt của bạn không hỗ trợ thẻ video. </video>
Kết quả:
Thuộc tính autoplay không làm việc trong các thiết bị di động như iPad và iPhone.
HTML Video – Hỗ trợ trình duyệt
Trong HTML5, Có 3 loại video được hỗ trợ với định dạng: MP4, WebM, and Ogg.
Các trình duyệt hỗ trợ các định dạng khác nhau:
| Trình duyệt | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | Có | Không | Không |
| Chrome | Có | Có | Có |
| Firefox | Có | Có | Có |
| Safari | Có | Không | Không |
| Opera | Có (từ Opera 25) | Có | Có |
HTML Video – Các kiểu Media
| Định dạng File | Kiểu Media |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML Video – Các phương thức, thuộc tính và sự kiện
HTML5 định nghĩa DOM (Data Object Model) với các phương thức, thuộc tính và sự kiện cho phần phần tử <video>.
Điều này cho phép bạn tải, chạy và dừng video, cũng như các thiết lập thời gian chạy và âm lượng.
Cũng có những sự kiện DOM có thể thông báo cho bạn khi video bắt đầu chạy, dừng, vv.
Ví dụ: Sử dụng JavaScript
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="video1" width="420">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>
</body>
</html>
Kết quả:
Thẻ Video trong HTML5
| Thẻ | Mô tả |
|---|---|
| <video> | Định nghĩa một video hoặc đoạn phim |
| <source> | Định nghĩa nhiều nguồn tài nguyên cho phần tử media, cũng như <video> và<audio> |
| <track> | Định nghĩa phần text hiển thị khi chạy nhạc |
Kết luận
Qua đây là một số chia sẻ về video trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.
Các bạn có thể tham khảo các bài viết hay về HTML tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
