07/09/2018, 14:59

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 awidthheight. 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
Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • 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
0