Tạo bài viết
Đăng ký
19/09/2018, 15:07

Video trong HTML5

Trình duyệt của bạn không hỗ trợ thẻ video trong HTML5. Video được cung cấp từ Big Buck Bunny. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 < ! DOCTYPE html > < html ...

Trình duyệt của bạn không hỗ trợ thẻ video trong HTML5.

Video được cung cấp từ Big Buck Bunny.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<body>
 
<video awidth="400" controls>
<source src="https://webvn.com/wp-content/uploads/2014/12/mov_bbb.mp4" type="video/mp4">
<source src="https://webvn.com/wp-content/uploads/2014/12/mov_bbb.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video trong HTML5.
</video>
 
<p>
Video được cung cấp từ
<a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
 
</body>
</html>

Demo

Hiển thị video trên web

Trước khi HTML5 ra đời, không có bất kỳ chuẩn nào quy định việc hiển thị video trên website. Nếu muốn hiển thị video trên trình duyệt, thông thường người dùng phải thêm chương trình hỗ trợ (như flash).

Khi thẻ <video> được đưa vào HTML5, bạn có thể dễ dàng chèn video theo đúng chuẩn.

Trình duyệt hỗ trợ

Số trong bảng dưới đây thể hiện phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ cho thuộc tính.

Thuộc tính Icon Chrome Icon FireFox Icon IE Icon Safari Icon Opera
Video 4.0 3.5 9.0 4.0 10.5

Thẻ video trong HTML5

Sử dụng thẻ <video> để hiển thị video trong HTML5:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<body>
 
<video awidth="320" height="176" controls>
<source src="/wp-content/uploads/2014/12/mov_bbb.mp4" type="video/mp4">
<source src="/wp-content/uploads/2014/12/mov_bbb.ogg" type="video/ogg">
 
Trình duyệt của bạn không hỗ trợ thẻ video trong HTML5.
</video>
 
<p>
Video được cung cấp từ
<a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
</body>
</html>

Demo

Cách sử dụng thẻ video

Thuộc tính controls cho phép hiển thị thanh điều khiển video như: bắt đầu, tạm dừng, âm lượng…

Thuộc tính height và awidth được sử dụng để quy định chiều cao và độ rộng của video.

Nếu thuộc tính height và awidth không được thiết lập, trình duyệt sẽ không biết kích thước chính xác của video dẫn tới trang có thể bị co dãn khi tải video.

Đoạn thông báo nằm giữa thẻ <video> và </video> chỉ hiển thị đối với những trình duyệt không hỗ trợ thẻ <video>.

Bạn có thể sử dụng nhiều thẻ <source> để liên kết tới tệp tin video có định dạng khác nhau. Trình duyệt sẽ tự động tải kiểu video mà nó hỗ trợ. Nếu có nhiều kiểu video được hỗ trợ trong thẻ <source>, trình duyệt sẽ sử dụng kiểu đầu tiên.

Tự động chạy video

Để video tự động chạy ngay khi tải trang, bạn sử dụng thuộc tính autoplay

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>
 
<video awidth="320" height="176" autoplay>
<source src="/wp-content/uploads/2014/12/mov_bbb.mp4" type="video/mp4">
<source src="/wp-content/uploads/2014/12/mov_bbb.ogg" type="video/ogg">
 
Trình duyệt của bạn không hỗ trợ thẻ video trong HTML5.
</video>
 
<p>
Video được cung cấp từ <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
</body>
</html>

Demo

Thuộc tính autoplay không hoạt động trên Safari, Opera và các thiết bị di động như iPad, iPhone.

Định dạng video được hỗ trợ

Hiện tại, có 3 kiểu định dạng được hỗ trợ trong thẻ <video> là: MP4, WebM và Ogg:

Trình duyệtMP4WebMOgg
Internet ExplorerCÓKHÔNGKHÔNG
ChromeCÓCÓCÓ
FirefoxCÓCÓCÓ
SafariCÓKHÔNGKHÔNG
OperaCÓ (từ phiên bản 25)CÓCÓ

Các kiểu video

Định dạngKiểu
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

Phương thức, thuộc tính, sự kiện trong thẻ video

HTML5 sử dụng DOM cho các phương thức, thuộc tính và sự kiện của thẻ <video>.

Nó cho phép bạn tải, chạy, dừng video cũng như thiết lập thời lượng và âm lượng của video.

Bạn có thể sử dụng javascript để bắt các sự kiện trong DOM qua đó nắm được các trạng thái của video như: video bắt đầu chạy, tạm dừng, v.v…

Chạy/Tạm dừng Cỡ lớn Cỡ nhỏ Cỡ vừa

Trình duyệt của bạn không hỗ trợ thẻ video trong HTML5.

Video được cung cấp từ Big Buck Bunny.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<body>
 
<div style="text-align:center">
<button onclick="playPause()">Chạy/Tạm dừng</button>
<button onclick="makeBig()">Cỡ lớn</button>
<button onclick="makeSmall()">Cỡ nhỏ</button>
<button onclick="makeNormal()">Cỡ vừa</button>
<br><br>
<video id="video1" awidth="420">
<source src="https://webvn.com/wp-content/uploads/2014/12/mov_bbb.mp4" type="video/mp4">
<source src="https://webvn.com/wp-content/uploads/2014/12/mov_bbb.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video trong HTML5.
</video>
</div>
 
<script>
var myVideo = document.getElementById("video1");
 
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
 
function makeBig() {
myVideo.awidth = 560;
}
 
function makeSmall() {
myVideo.awidth = 320;
}
 
function makeNormal() {
myVideo.awidth = 420;
}
</script>
 
<p>Video được cung cấp từ <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>

Demo

Hoàng Hải Đăng

24 chủ đề

7226 bài viết

Có thể bạn quan tâm
0
Các chủ đề đang được quan tâm
phần mềm lập trình php | lập trình web php + mysql | khóa học lập trình php | tự học lập trình php | học php cơ bản thachpham | Code24h | Cho thuê phòng trọ hà nội | Cho thuê phòng trọ bình thạnh | Cho thuê phòng trọ | Cho thuê nhà trọ
Đăng ký

Đăng ký nhận thông báo

Các bài học thú vị sẽ được gửi đến inbox của bạn

HỖ TRỢ HỌC VIÊN
VỀ CODE24H
HỢP TÁC VÀ LIÊN KẾT
KẾT NỐI VỚI CHÚNG TÔI
TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

CCode 24h, code mọi lúc, mọi nơi

© Copy right 2018 - 2024