The HTML video tag is useful when you want to add a video to your web pages. In modern web browsers, adding the video is very easy. You do not need to install any extra plug-in for this. You can add the video by using a tag.
What Is an HTML tag?
An HTML video tag is used to embed video into your web page. The element is used to embed video content in an HTML document without requiring any additional plugin like Flash player.
Văn bản giữa thẻ video chỉ được hiển thị trong các trình duyệt không hỗ trợ thẻ video
Ghi chú. Giữ tệp HTML và tệp video mà bạn sẽ thêm vào cùng một thư mục
Khóa học Full Stack Web Developer
Để trở thành chuyên gia về MEAN Stack Xem khóa họcThuộc tính dành riêng cho thẻ
Thuộc tính
Giá trị
Sự miêu tả
tự chạy
tự chạy
Nó chỉ định rằng video sẽ được phát tự động
điều khiển
điều khiển
Nó hiển thị các điều khiển video mặc định như phát, tạm dừng, âm lượng, v.v.
Chiều cao
điểm ảnh
Nó chỉ định chiều cao của video
vòng
vòng
Nó chỉ định rằng video sẽ bắt đầu lại khi đến cuối
tắt tiếng
tắt tiếng
Nó chỉ định rằng âm thanh nên được tắt tiếng
poster
URL
Nó chỉ định một hình ảnh để xem trước khi tải video
tải trước
tự động, siêu dữ liệu, không có
Nó cung cấp một gợi ý cho trình duyệt về những gì tác giả nghĩ sẽ dẫn đến trải nghiệm người dùng tốt nhất
src
URL
Nó chỉ định vị trí của tệp video để nhúng
chiều rộng
điểm ảnh
Nó đặt chiều rộng của khu vực hiển thị của video
Hỗ trợ trình duyệt
Trình duyệt Chrome
firefox
I E
Ô-pê-ra
Cuộc đi săn
di động
Đúng
Đúng
Đúng
Đúng
Đúng
Đúng
Nâng cao kỹ năng về HTML5 và CSS3 với Chương trình dành cho nhà phát triển Java Full Stack. Click để xem chi tiết chương trình
Bạn có muốn trở thành Nhà phát triển Full-Stack không?
Bài viết này về thẻ video HTML đã cung cấp cho bạn thông tin chi tiết về cách bạn có thể thêm video vào trang web của mình. Bây giờ bạn đã biết các thuộc tính khác nhau của thẻ video, bạn có thể tiến thêm một bước và tìm hiểu thêm về phát triển web. Chương trình Master Full Stack Developer của Simplilearn Rất được khuyến khích và có thể đóng vai trò là chất xúc tác cho sự nghiệp viết mã của bạn. Khóa học sẽ cung cấp cho bạn bản chất của các công nghệ phát triển web Java mặt trước, phần mềm trung gian và mặt sau. Bạn sẽ học cách xây dựng một ứng dụng đầu cuối, kiểm tra và triển khai mã, lưu trữ dữ liệu bằng MongoDB, v.v.
Nếu bạn là một nhà phát triển web và di động đầy tham vọng, khóa đào tạo HTML sẽ mở rộng các kỹ năng và cơ hội nghề nghiệp của bạn. Và trong trường hợp bạn có bất kỳ câu hỏi nào cho chúng tôi, hãy đề cập đến nó trong phần bình luận và chúng tôi sẽ có các chuyên gia của chúng tôi trả lời cho bạn
Tìm Chương trình đào tạo trực tuyến dành cho nhà phát triển Java Full Stack của chúng tôi tại các thành phố hàng đầu
NameDatePlaceNhóm nhà phát triển Java Full Stack bắt đầu vào ngày 4 tháng 1 năm 2023,Đợt cuối tuần Chi tiết CityView của bạnNhóm nhà phát triển Java Full Stack bắt đầu vào ngày 5 tháng 1 năm 2023,
Đợt các ngày trong tuầnChi tiết CityView của bạnĐầy đủ
Weekdays batchYour CityView Details
Giới thiệu về tác giả
Aryan là một người đam mê công nghệ, thích cập nhật các xu hướng công nghệ ngày nay. Anh ấy đam mê tất cả mọi thứ về công nghệ, một nhà nghiên cứu sắc sảo và viết để truyền cảm hứng. Bên cạnh công nghệ, anh ấy là một cầu thủ bóng đá tích cực và là một người đam mê trò chơi
Trước khi HTML 5 ra đời, các nhà phát triển web phải nhúng video vào trang web bằng plugin như Adobe flash player
Ngày nay, bạn có thể dễ dàng nhúng video vào tài liệu HTML bằng thẻ
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Trong bài viết này, chúng ta sẽ xem cách hoạt động của thẻ
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Mục lục
- Cú pháp cơ bản
- Thuộc tính của thẻ
1body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #d3d3d3; } - Thuộc tính
4body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #d3d3d3; } - Thuộc tính
5body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #d3d3d3; } - Thuộc tính
6body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #d3d3d3; } - Thuộc tính
7body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #d3d3d3; } - Thuộc tính
8body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #d3d3d3; } - Thuộc tính
9 vàbody { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #d3d3d3; }
0 - Thuộc tính
1 - Thuộc tính
2 - Phần kết luận
Cú pháp cơ bản
Cũng giống như thẻ
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Theo mặc định, nó được hiển thị dưới dạng hình ảnh trong trình duyệt
CSS này căn giữa mọi thứ trong trang web và thay đổi màu nền
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Ngoài ra, bạn có thể chỉ định nhiều nguồn video cho
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Bạn có thể sử dụng nhiều thẻ
Thuộc tính của thẻ body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
1
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Thẻ
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Nếu bạn đang thắc mắc thuộc tính toàn cầu là gì, thì đó là những thuộc tính được hỗ trợ bởi tất cả các thẻ HTML
Các thuộc tính cụ thể được hỗ trợ bởi thẻ
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Thuộc tính body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
4
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Thuộc tính src được sử dụng để xác định nguồn của video. Đó có thể là đường dẫn tương đối tới video trên máy cục bộ của bạn hoặc liên kết video trực tiếp từ internet
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Đây là tùy chọn vì bạn có thể sử dụng thẻ
Thuộc tính body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
5
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Với thuộc tính poster, bạn có thể kết hợp một hình ảnh để hiển thị trước khi video bắt đầu phát hoặc trong khi video đang tải xuống
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Thay vì hình ảnh của cảnh đầu tiên của video, trình duyệt sẽ hiển thị hình ảnh này
Thuộc tính body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
6
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Khi bạn sử dụng điều khiển, nó cho phép trình duyệt hiển thị các bộ điều khiển phát lại như phát và tạm dừng, âm lượng, tìm kiếm, v.v.
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Thuộc tính body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
7
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Với thuộc tính vòng lặp, bạn có thể làm cho video tự động lặp lại. Tức là làm cho nó bắt đầu phát lại mỗi khi nó dừng phát
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Thuộc tính body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
8
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Thuộc tính
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Thuộc tính body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
9 và
0
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Bạn có thể sử dụng thuộc tính chiều rộng và chiều cao để chỉ định chiều rộng và chiều cao cho video theo pixel. Nó chỉ chấp nhận các giá trị tuyệt đối, ví dụ: pixel
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Thuộc tính
1
Bạn có thể sử dụng thuộc tính tắt tiếng để yêu cầu trình duyệt không phát bất kỳ âm thanh nào liên quan đến video khi video bắt đầu phát
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Nếu thuộc tính
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Thuộc tính
2
Với thuộc tính tải trước, bạn có thể cung cấp gợi ý cho trình duyệt về việc có nên tải xuống video hay không khi tải trang
Thuộc tính này rất quan trọng đối với trải nghiệm người dùng
Bạn có thể sử dụng 3 giá trị với thuộc tính tải trước
không ai. chỉ định rằng video sẽ không tải cho đến khi người dùng nhấn phát
tự động. chỉ định rằng video sẽ được tải xuống ngay cả khi người dùng không nhấn phát
metadata. chỉ định rằng trình duyệt sẽ thu thập siêu dữ liệu như độ dài, kích thước, thời lượng, v.v.
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Phần kết luận
Trong bài viết này, bạn đã tìm hiểu về thẻ HTML5
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Vì âm thanh là một phần quan trọng của một video hoàn chỉnh nên bạn cũng có thể sử dụng thẻ
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #d3d3d3;
}
Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ nó với bạn bè và gia đình của bạn để nó có thể đến được với nhiều người hơn có thể cần nó
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Nhà phát triển web và nhà văn kỹ thuật tập trung vào các công nghệ giao diện người dùng
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu