HTML5: <video>
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 |
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>