Bài 39: Video trong HTML5
Nội dung
Ví dụ về video HTML . Nguồn video 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).
Phần tử <video> trong HTML5 định nghĩa một chuẩn để nhúng video vào một trang web.
Trình duyệt hỗ trợ
Những con số trong bảng xác định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <video>.
| Trình dyệt |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Phần tử <video> trong HTML
Để hiển thị một video HTML, sử dụng phần tử <video>:
Ví dụ:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>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="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>
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="mov_bbb.mp4" type="video/mp4">
<source src="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>
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 |
