Phát video trong HTML
Trước HTML5, một video chỉ có thể được phát trong trình duyệt với một trình hỗ trợ mở rộng (như Flash Player).
Phần tử HTML5 <video> chỉ ra cách thức tiêu chuẩn để nhúng video vào trang web.
Phần tử HTML <video>
Để hiển thị một video trong HTML, ta dùng phần tử <video>:
Ví dụ
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" 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 trình điều khiển video như play, pause, và volume.
Bạn cũng nên thêm thuộc tính width và height, nếu không đặt kích thước cho video, trang có thể bị nhấp nháy (do chưa xác định được kích thước video) khi tải trang.
Phần tử <source> cho phép bạn chỉ ra đường dẫn của video để trình duyệt lựa chọn. Trình duyệt sẽ lấy định dạng đầu tiên nó nhận ra.
Văn bản đặt giữa cặp thẻ <video> và </video> chỉ hiển thị nếu trình duyệt không hỗ trợ phần tử video.
HTML <video> autoplay
Để phát tự động một video ta dùng thuộc tính autoplay.
Ví dụ
<video width="320" height="240" autoplay>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
Thuộc tính autoplay không hoạt động trên thiết bị di động như iPad và iPhone.
HTML video – Trình duyệt hỗ trợ
Trong HTML5, có 3 định dạng video được hỗ trợ : MP4, WebM, và Ogg.
Trình duyệt hỗ trợ cho các định dạng khác nhau là:
|
Browser |
MP4 |
WebM |
Ogg |
|
Internet Explorer |
YES |
NO |
NO |
|
Chrome |
YES |
YES |
YES |
|
Firefox |
YES |
YES |
YES |
|
Safari |
YES |
NO |
NO |
|
Opera |
YES (from Opera 25) |
YES |
YES |
Phân loại video
|
Định dạng File |
Kiểu |
|
MP4 |
video/mp4 |
|
WebM |
video/webm |
|
Ogg |
video/ogg |
HTML video – Phương thức, thuộc tính và sự kiện.
HTML5 xác định DOM phương thức, 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à dừng video cũng như cài đặt độ dài 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 video bắt đầu phát, bị tạm dừng, v.v.
Ví dụ sử dụng JavaScript
<!DOCTYPE html>
<html>
<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><br>
<video id="video1" width="420">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>
<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>
Để tham khảo thêm về DOM các bạn có thể vào đường dẫn HTML5 Audio/Video DOM Reference.
Các thẻ video HTML5
|
Thẻ |
Mô tả |
|
<video> |
Xác định một video hoặc phim |
|
<source> |
Xác định tài nguyên cho các phần tử media như <video> và <audio> (dùng thuộc tính src để dẫn nguồn cho video và audio) |
|
<track> |
Xác định phụ đề trong trình phát media |
Trích nguồn từ: (https://www.w3schools.com/html/html5_video.asp)
