Bài 39: Video trong HTML5

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>

Xem 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="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>

Xem 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="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>

Xem 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