HTML5: <video>

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Hiện nay có nhiều website sử dụng video nhưng không theo một chuẩn nào. HTML5 cung cấp một chuẩn video hoàn toàn mới thông qua phần tử <video>.

Trình duyệt hỗ trợ

Internet Explorer 9+, Firefox, Opera, Chrome và Safari đều hỗ trợ phần tử <video>.

Cách sử dụng phần tử <video>

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<video width="320" height="240" controls autoplay loop>
<source src="" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
  Trình duyệt này không hỗ trợ phần tử video
</video>
</body>
</html>

Giải thích ví dụ:

Thuộc tính 'controls' dùng để hiển thị bộ điều khiển video, bao gồm các nút play, pause, volume và fullscreen.

Thuộc tính 'width' và 'height' dùng để thiết lập độ rộng và độ cao cho video.

Thuộc tính 'autoplay' sẽ cho phép tự động thực thi video.

Thuộc tính 'loop' sẽ cho phép lặp lại việc thực thi video mỗi khi video được thực thi xong.

Nếu trình duyệt không hỗ trợ phần tử <video> thì dòng chữ "Trình duyệt này không hỗ trợ phần tử video" sẽ hiện ra.

Trong phần tử <video> cho phép sử dụng nhiều phần tử <source>. Các phần tử <source> có thể liên kết đến các file video khác nhau và trình duyệt sẽ sử dụng định dạng video đầu tiên hợp lệ.

Các định dạng video và trình duyệt hỗ trợ

Hiện tại phần tử <video> hỗ trợ ba định dạng video là MP4, WebM và Ogg. Dưới đây là sự hỗ trợ của các trình duyệt đối với các định dạng này:

Trình duyệt

MP4

WebM

Ogg

Internet Explorer

YES

NO

NO

Chrome

YES

YES

YES

Firefox

NO
Cập nhật: Firefox từ phiên bản 21 trở nên chạy trên các hệ điều hành Windows 7, Windows 8, Windows Vista và Android đều hỗ trợ MP4.

YES

YES

Safari

YES

NO

NO

Opera

NO

YES

YES

  • MP4 - Các file MPEG 4 có định dạng video là H264 và định dạng audio là AAC
  • WebM - Các file WebM có định dạng video là VP8 và định dạng audio là Vorbis
  • Ogg - Các file Ogg có định dạng video là Theora và định dạng audio là Vorbis

Các kiểu MIME để định dạng cho Video

Định dạng

Kiểu MIME

MP4

video/mp4

WebM

video/webm

Ogg

video/ogg

Các thuộc tính và phương thức DOM

HTML5 có khá nhiều thuộc tính, phương thức và sự kiện của DOM để cho phép thao tác trên các phần tử <video>.

Ví dụ dưới đây minh họa cách dùng phần tử <video> kết hợp với các thuộc tính và phương thức để điểu khiển video.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<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>
  <video id="video1" width="420">
    <source src="Link_video.mp4" type="video/mp4">
    <source src="Link_video.ogg" type="video/ogg">
    Trình duyệt này không hỗ trợ phần tử video.
  </video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause(){
if(myVideo.paused) //Nếu video đang tạm dừng
  myVideo.play();  //thì tiếp tục cho video chạy
else
  myVideo.pause(); //ngược lại thì cho video tạm dừng
}
function makeBig(){
myVideo.width=560; //Đặt lại độ rộng cho video lớn hơn độ rộng cũ
}
function makeSmall(){
myVideo.width=320; //Đặt lại độ rộng cho video nhỏ hơn độ rộng cũ
}
function makeNormal(){
myVideo.width=420; //Đặt lại độ rộng cho video bằng độ rộng cũ
}
</script>
</body>
</html>

Xem thêm:

» Tiếp: <wbr>
« Trước: <svg>
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!