Video trong HTML

Video trong HTML

Ví dụ về video trong HTML

Nguồn: Big Buck Bunny


Chạy video trong HTML

Trước HTML5, video chỉ có thể được chạy được trong các trình duyệt có cài đặt plug-in để xem video (ví dụ như flash).

Video trong HTML5 định nghĩa một chuẩn để nhúng video vào một trang web.


Phần tử <video> trong HTML

Để hiển thị một video HTML, sử dụng phần tử <video>:

Ví dụ:

<video width="600" height="300" controls>
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Kết quả:


Cách hoạt động?

Thuộc tính controls thêm các điều khiển  cho video như chạy, dừng và âm lượng.

Một ý tưởng tốt là luôn sử dụng thuộc tính chiều rộng (width) và chiều cao (height). Nếu chiều cao và chiều rộng không được thiết lập, trang web có thể rung hình trong khi tải video.

Phần tử <source> cho phép bạn định nghĩa các các tập tin video thay thế mà trình duyệt có thể chọn từ đó.  Trình duyệt sẽ sử dụng các định dạng đầu tiên mà nó nhận biết được.

Đoạn văn bản nằm giữa thẻ <video> và </video> sẽ chỉ hiển thị trong trình duyệt mà trình duyệt không hỗ trợ phần tử <video>.


Phát tự động video trong HTML

Để một video chạy tự động ta sử dụng thuộc tính autoplay:

Ví dụ:

<video width="600" height="300" autoplay>
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>

Kết quả:

Thuộc tính autoplay không làm việc trong các thiết bị di động như iPad và iPhone.


HTML Video – Hỗ trợ trình duyệt

Trong HTML5, Có 3 loại video được hỗ trợ với định dạng: MP4, WebM, and Ogg.

Các trình duyệt hỗ trợ các định dạng khác nhau:

Trình duyệtMP4WebMOgg
Internet ExplorerKhôngKhông
Chrome
Firefox
SafariKhôngKhông
OperaCó (từ Opera 25)

HTML Video – Các kiểu Media

Định dạng FileKiểu Media
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

HTML Video – Các phương thức, thuộc tính và sự kiện

HTML5 định nghĩa DOM (Data Object Model) với các phương thức, thuộc tính và sự kiện cho phần phần tử  <video>.

Điều này cho phép bạn tải, chạy và dừng video, cũng như các thiết lập thời gian chạy và âm lượng.

Cũng có những sự kiện DOM có thể thông báo cho bạn khi video bắt đầu chạy, dừng, vv.

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.ogg" 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>
</body>
</html>

Kết quả:




Thẻ Video trong HTML5

ThẻMô tả
<video>Định nghĩa một video hoặc đoạn phim
<source>Định nghĩa nhiều nguồn tài nguyên cho phần tử media, cũng như <video> và<audio>
<track>Định nghĩa phần text hiển thị khi chạy nhạc

Kết luận

Qua đây là một số chia sẻ về video trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.

Các bạn có thể tham khảo các bài viết hay về HTML tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Leave a Reply

Your email address will not be published. Required fields are marked *