Tìm hiểu video trong HTML5 - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Tìm hiểu video trong HTML5

HTML5

Hướng dẫn HTML

Biểu mẫu HTML

Đồ họa HTML

Phương tiện ghi HTML

HTML APIs

Tài nguyên HTML

Chạy video trên HTML

Trước HTML5, một video chỉ có thể được phát trong một trình duyệt với một plug-in (như flash). Phần tử <video> của HTML5 xác định một cách tiêu chuẩn để nhúng một video trong một trang web.

Trình duyệt hỗ trợ

Các 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>.

Phần tử <video> trong HTML

Để 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>

Cách thức 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. Để hiển thị tốt thì khi khai báo 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 tải video.

Phần tử <source> cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên.

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>.

Tự động phát video trong HTML

Để tự động chạy một video, bạn sẽ 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.

Video trong HTML – Trình duyệt hỗ trợ

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

 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ó (Opera 25 trở đi)  Có  Có

Video trong HTML – Loại media

Định dạng file Loại Media
 MP4  video/mp4
 WebM  video/webm
 Ogg  video/ogg

Video trong HTML – Phương thức, thuộc tính và sự kiện

HTML5 định nghĩa các phương pháp DOM, thuộc tính và sự kiện cho phần tử <video>. Điều này cho phép bạn tải, phát và tạm dừng video, cũng như cài đặt thời lượng và âm lượng.

Ngoài ra còn có các sự kiện DOM có thể thông báo cho bạn khi một video bắt đầu phát, bị tạm dừng, v.v.

Thẻ video trong HTML5

 Thẻ  Mô tả
 <video>  xác định một video hoặc movie
 <source>  xác định nhiều tài nguyên đa phương tiện cho các phần tử truyền thông, chẳng hạn như <video> và <audio>
 <track>  xác định bài hát trong trình phát media