Tìm hiểu video trong HTML5
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 ...
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 awidth=”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 awidth 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 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 awidth=”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 |
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
